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

【问题标题】：how does a onChange handler get access to the previous state of variables?onChange 处理程序如何访问变量的先前状态？
【发布时间】：2020-08-07 10:39:18
【问题描述】：

我在某处找到了以下示例，但我无法弄清楚它应该如何工作，请有人解释一下，我了解 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}
    />

【问题讨论】：

标签： reactjs react-component react-state

【解决方案1】：

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

Functional Updates

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

【讨论】：

谢谢，但请您解释一下 setInputData 是如何被调用的？很明显，handleChange 函数是以事件对象为参数调用的，究竟是什么调用了当前状态的 setInputData？
@nightograph setInputData 只是 useState 钩子返回的命名函数。 handleChange 正在调用它并将定义的回调函数作为参数传递。
嘿，Drew，好吧，也许我对 javascript 的了解还没有，所以浏览器渲染并反应注册函数 handleChange 以在更改时调用，更改发生并反应调用 handleChange 与事件作为函数参数，现在在该函数中，我们正在调用 setInputData ，而不是向它发送对象的新状态，而是向它发送一个匿名函数，该函数将数据的当前状态作为参数并返回新的调用该匿名函数的内容?非常感谢
@nightograph 不用担心，如果您来自 imperative 背景，IMO react 的学习曲线会非常陡峭，如果您不熟悉传递回调或使用函数作为一等公民。反应框架是调用传递的“匿名”函数。
@nightograph 肯定。

【解决方案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，那么您之前输入的值将会丢失。

【讨论】：