Странное поведение setState с MaterialUI в React JS - PullRequest
Новая
       4

Странное поведение setState с MaterialUI в React JS

1 голос
/ 27 февраля 2020

Я пытаюсь показать компонент ввода из material-ui, но когда я пишу какой-то текст (что-то вроде 3 букв), страница падает. 

import React from 'react';
import Input from '@material-ui/core/Input';

export default function ComposedTextField() {
  const [state, setState] = React.useState('');

  const handleChange = event => {
    setState((state) => event.target.value);
  };

  return (
    <Input id="component-simple" value={state} onChange={handleChange} />
  );
}

Я заметил, что замена setState((state) => event.target.value); с setState(event.target.value); исправляет проблему, но мне нужно (в моем реальном проекте) использовать полную версию setState.

Кто-нибудь понимает, почему setState((state) => event.target.value); не работает?

1 Ответ

6 голосов
/ 27 февраля 2020

Объект event повторно используется после выполнения обратного вызова, поэтому нельзя использовать асинхронно , как это делает код прямо сейчас.

Получите любые нужные вам значения события в их собственные переменные: 

const handleChange = event => {
  const { value } = event.target
  setState((state) => value);
};

В качестве альтернативы, если вам нужен доступ ко всему событию, вы можете использовать event.persist(), чтобы удалить объект из пула и не использовать его повторно.

...