输入 onChange 处理程序处理程序不起作用 - React Hooks

Question

我的 Input 处理程序在前 2 次更改时工作正常，在第 3 次更改时会引发错误：

代码如下：

const [fields, setFields] = useState({
    email: '',
    password: ''
  });

  ...

  const handleFieldChange = useCallback((field, e) => {
    console.log(e);
    setFields(prevstate => ({
      ...prevstate,
      [field]: e.target.value
    }))
  }, [setFields]);

  ...


  <TextField
     className={cx('input')}
     label="Email"
     value={fields.email}
     variant="outlined"
     onChange={(e) => handleFieldChange('email',e)}
  />

到目前为止，我尝试删除 useCallback 并且它的行为方式相同。

Answer 1

是的！我发现依赖项必须是它在这里起作用的值`

const handleFieldChange = useCallback((field, e) => {
    console.log(e);
    setFields(prevstate => ({
      ...prevstate,
      [field]: e.target.value
    }))
  }, [fields.email]);`

顺便说一句，useCallback 可用于昂贵的计算，我认为这里不需要

const handleFieldChange = (field,e)=>{
 // your logic
}

这就够了！

查看此文档了解更多信息https://kentcdodds.com/blog/usememo-and-usecallback/

Answer 2

不要使用useCallback。它会memoise函数，每次都给出相同的函数，只要依赖相同，这里不是你想要的。

这会增加很多开销，这实际上会使您的性能变慢。

Read more 关于为什么你不应该使用它，作者之一。

只需删除useCallback 位即可：

  const handleFieldChange = (field, e) => 
    setFields(prevstate => ({
      ...prevstate,
      [field]: e.target.value
    }))
  

---

进一步的建议是不要做奇怪的字符串处理东西来编辑状态，使用新的钩子我们可以有多个不同的状态，将它们分开更有效，代码也更可读。

const MainComponent = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <div>
      <TextField
        label="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <TextField
        label="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
    </div>
  );
};

---

另一种选择，以便状态位于一个对象中 - 请注意我如何避免尝试通过传递字符串键来访问状态对象，但将其保持在一个位置：

const MainComponent = () => {
  const [fields, setFields] = useState({
    email: "",
    password: "",
  });

  return (
    <div>
      <TextField
        label="Email"
        value={fields.email}
        onChange={e => setFields({ ...fields, email: e.target.value })}
      />
      <TextField
        label="Password"
        value={fields.password}
        onChange={e => setFields({ ...fields, password: e.target.value })}
      />
    </div>
  );
};

查看沙盒here