根据之前的状态更新 React State

Question

我是 React 的初学者，我遵循 Udemy.I 中的教程，对状态感到困惑。当我尝试根据之前的状态更新状态时，为什么导师说我们需要始终使用第二种方法，而这两种方法对我来说似乎都是合乎逻辑的。

This is my initialization

const [UserInput, setUserInput] = useState({
      enteredTitle:'',
      enteredDate:'',
      enteredAmount:''
  });

So here is the first approach.

const handleTitleChange = (event) =>{
      setUserInput({
          ...UserInput,
          enteredTitle:event.target.value
      })
  }

This is my second approach.

const handleTitleChange = (event) =>{
    setUserInput((prevState) => {
        return{
            ...prevState, enteredTitle:event.target.value}
    });

Answer 1

你的导师不对。正如您可能已经注意到的那样，您的第一种方法在许多情况下都能很好地发挥作用。但是在某些情况下，您确实需要使用第二种方法——即，当函数被调用时，可能会关闭状态的旧值。例如，如果您有一个按钮，单击该按钮会在 2 秒后更改状态 - 状态可能会在那 2 秒内更改，在这种情况下 UserInput 状态函数在超时 closes over 会过时。

// Don't do this
const handleClick = () => {
  setTimeout(() => {
    setState({ ...state, newProp: 'newVal' });
  }, 2000);
};

当范围内没有可靠的 up-to-date 状态变量时，有必要改用回调形式 - setState(state => 或 setUserInput((prevState) =>。

许多人更喜欢使用简单状态 setter 方法 - 例如

  setUserInput({
      ...UserInput,
      enteredTitle:event.target.value
  })

并避免回调版本，除非情况需要回调版本。编写、读取和解析的代码更少。

根据之前的状态更新 React State

Update React State depending on the previous state

state

reactjs