Reactjs 传递到其他功能组件的回调是否在刷新时更新？

我有一个复杂的表单，它包含不同类型的输入元素。为了简单起见，我将把它限制为一个，因为每一个都有效地遵循相同的方法

const Form = () => {
  const [state, setState] = useState();

  const handleChange = useCallback((name, value) => {
    setState({
      ...state,
      [name]: value
    })
  }, [state, setState]);

  useEffect(() => {
    console.log(state)
  }, [state, setState]);

  return (
    <div>
      <Input name="inputOne" onChange={handleChange} />
      <Input name="inputTwo" onChange={handleChange} />
    </div>
  );
}

const Input = ({ name, onChange }) => {
  const [value, setValue] = useState("");

  const handleChange = useCallback((e) => {
    setValue(e.target.value);
    onChange(name, e.target.value)
  }, [value, setValue]);

  return (
    <input onChange={handleChange} value={value}/>
  );
}

但是如果我在第二个输入中输入了一些东西，我就会得到这个

{ "inputTwo": "value entered into input two" }

如果我再次返回并输入

inputOne

，我们会再次得到这个结果

{ "inputOne": "value entered into input one, and more text entered" }   

据我所知，我编写的代码应该在状态更改时更新回调，以便传播的新状态（…状态）是最新的状态值。然后，我将

handleChange

函数传递到的所有元素中都会更新该值。但是，

handleChange

似乎没有在传递到

onChange

参数的位置进行更新，因此调用旧回调时状态属性保存不正确

---

有人能告诉我这是否正确，以及

handleChange

回调没有正确更新吗？就像两个输入都看到了对

handleChange

回调的不同引用一样。

您案例中的问题是一个非常典型的闭包问题

如何获得一个旧的参考文献是相当复杂的，但让我尽可能地解释它

创建表单组件时，handleChange函数会在每次状态更改时更新，并传递给输入组件。但是，即使更新的实例被传递给子实例，子实例也不会使用更新的实例，除非其自身的值发生更改。现在，当它试图更新其值时，它正在调用旧的引用函数，而该函数中没有反映其他输入值

有两种方法可以解决这个问题

• 使用回调方法设置状态，这样无论其闭包中的值如何，react都会为您提供最新的状态
• 另一种解决方法是将onChange作为依赖项添加到输入组件中的useCallback中，这样即使其他输入元素导致了状态更改，所有输入都具有onChange函数的最新引用

const{useCallback，useState，useffect}=React；
常数形式=（）=>{
const[state，setState]=useState（{}）；
const handleChange=useCallback（（名称、值）=>{
设置状态（上一个=>({
…上一页，
[名称]：值
}))
}，[setState]）；
useffect（（）=>{
console.log（状态）；
}，[状态，设置状态]；
返回(
);
}
常量输入=（{name，onChange}）=>{
const[value，setValue]=useState（“”）；
const handleChange=useCallback（（e）=>{
设定值（即目标值）；
onChange（名称，例如target.value）
}，[value，setValue]）；
返回(
);
}
ReactDOM.render（，document.getElementById（'app'））

感谢您的回复。老实说，这是我在这里得到的最清楚、最翔实的回答！回答了另一个我一直想问的问题（正如你在P.S.中指出的）。感谢您提供的解决方案，以前从未见过setState的回调重载，所以这是巨大的！很高兴帮助了特里斯坦
{ "inputOne": "value entered into input one, and more text entered" }