Question

“我的输入”的处理程序在前两个更改中工作正常，在第三个更改中，它将引发错误：

代码如下：

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。只要相关性相同，它将记住该功能，并每次都提供相同的功能，这不是您想要的。

这会增加很多开销，实际上会降低您的性能。

Read more，介绍为什么要使用它的人之一。

只需删除useCallback位，它将起作用：

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

进一步的建议是不要使用奇怪的字符串处理内容来编辑状态，有了新的钩子，我们可以拥有多个不同的状态，并且将它们分开分割更有效，而且可读性也更高。 / p>

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

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

2 个答案: