onChange 处理程序如何访问变量的先前状态？

Question

我在某处找到了以下示例，但我无法弄清楚它应该如何工作，请有人解释一下，我了解 setState 的用法和初始化它，但我不了解变量 prevInputData！什么在调用 setInputData 以及在调用 setInputData 时如何将先前的状态作为参数传递，我很困惑！

    //state stuff 
    const [inputData, setInputData] = useState({firstName: "", lastName: ""})

    //onChange handler 
    function handleChange(event) {
      const {name, value} = event.target

      setInputData(prevInputData => { //HOW THIS IS SUPPOSED TO WORK?
        return {
            ...prevInputData,
            [name]: value
          }
       });
    }

    //form input 
    <input name="lastName" 
           value={inputData.lastName}
           onChange={handleChange}
    />

Answer 1

这是一种误导。这不是 实际上 上一个渲染周期的状态值，它是当前状态值作为参数传递给 功能状态更新回调。但是，在协调期间调用回调来更新状态时，它是 now 上一个渲染周期的状态，returns 下一个状态值。

Functional Updates

setInputData(prevInputData => { // actually current state when queued
  return {
    ...prevInputData,
    [name]: value
  }
});

Answer 2

输入数据是在某个时候设置的吧？就像在第一个运行中说的那样，值设置为 firstname:"jhon" 和 lastname:"doe" 现在下一次你运行 setState 它已经引用了先前的值，因为它已被设置前。

 setInputData(prevInputData => { //Get the previous values which were set
        return {
            ...prevInputData, //uses spread operator to add those values here so that they are not lost
            [name]: value //setting new values.
          }
       });

换句话说，如果你不使用 prevInputData 这只是一个变量名，它可以是任何东西，你之前的更改将被覆盖。另外运行我的意思是它保持的当前状态，不像你可以在刷新后回来并且它会在那里。就像更新输入框一样，你离开每个输入框，状态都会更新并保留你之前添加的输入框值，如果你不这样做...prevData那么你之前输入的值将丢失。

onChange 处理程序如何访问变量的先前状态？

how does a onChange handler get access to the previous state of variables?

reactjs

react-component

react-state