React JS 中 MaterialUI 的奇怪 setState 行为

Question

我正在尝试显示来自 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); 不起作用吗？

Answer 1

event 对象在回调运行之后被重新使用，所以它 cannot be used asynchronously 就像代码现在所做的那样。

从事件中获取你需要的任何值到它们自己的变量中：

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

或者，如果您需要访问整个事件，您可以使用 event.persist() 将对象从池中移除，而不是重新使用它。

React JS 中 MaterialUI 的奇怪 setState 行为

Weird setState behaviour with MaterialUI in React JS

javascript

setstate

reactjs

material-ui