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对象在回调运行后被重新使用，因此它不能像代码现在所做的那样异步使用。

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

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

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