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 状态，并返回下一个状态值。

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处理程序如何访问变量的先前状态？

2 个答案: