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

Question

我在某个地方找到以下示例，但我无法弄清楚它是如何工作的，有人可以解释一下。我了解setState的用法并对其进行初始化，但我不了解变量prevInputData！什么叫setInputData以及如何在调用setInputData时将先前状态作为参数传递，我很困惑！

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

    //onChange handler 
    function handleFormChange(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

这是种类具有误导性。它不是actually上一个渲染周期的状态值，而是当前状态值作为参数传递给功能状态更新回调。但是，在协调过程中，在调用回调以更新状态时，它是上次渲染周期的状态[[now，并返回下一个状态值。

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（它只是一个变量名，它可以是任何变量，那么您之前的更改将被覆盖。