在 react js useState() 钩子中更改多个状态答案

【问题标题】：changing multiple states in react js useState() hook在 react js useState() 钩子中更改多个状态
【发布时间】：2019-12-15 22:42:36
【问题描述】：

所以我想知道当我在处理函数中更改多个状态时实际会发生什么。它们会同时得到更新还是一个接一个被执行。

const [x, setX] = useState(0)
const [y, setY] = useState(0)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

如果一个状态依赖于其他状态呢？

const handlerFunction = () => {
  setX(x+1)
  setY(x+1)
}

如果

const [x, setX] = useState(0)
const [y, setY] = useState(x)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

在 JavaScript* 中没有任何东西同时运行，因此状态更新会一个接一个地发生。但由于它们都是异步完成的，所以在下一次渲染之前您不会看到 x 或 y 更新，因此从您的角度来看，它会同时出现。

因此，在上述所有三种情况下，x 和 y 在调用一次 handlerFunction() 后的最终值将是 1 和 1。

还要注意，因为x 和y 只是变量，它们的值不能无论如何同步变化，这就是为什么你只能在下一次渲染中看到它们的值更新。 p>

但请注意，当您的状态更改依赖于先前的状态时，最好使用 functional updates：

const handlerFunction = () => {
  setX(x => x + 1)
  setY(y => y + 1)
}

这确保每次更新都是atomic operation。

_{*除非你正在处理工作线程}

【讨论】：

【解决方案2】：

设置状态本质上是异步的，所以 -

const handlerFunction = () => {
  setX(x+1)
  setY(x+1) // here the old value of x will be taken and the outcome value of x and y     will be different //                   
}

这里-

const [x, setX] = useState(0)
const [y, setY] = useState(x) // this is just to initialize an initial value to your state y so it will be once set to the value of x and then it doesn't depends on x//

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

【讨论】：

【解决方案3】：

https://github.com/facebook/react/issues/14259

如果从基于 React 的事件中触发，则 React 批次状态更新

因此，如果您从 onClick、onChange、onBlur... 调用处理程序... React 将同时应用多个更新。如果您从Promise 或setTimeout 调用处理程序，更新将被单独调用。

如果一个状态变量依赖于另一个，我建议将它们组合成一个对象，如下所示：

const [obj, setObj] = useState(() => ({x: 0, y: 0}));

const handlerFunction = () => {
  setObj(prevObj => {
    const newVal = prevObj.x + 1;
    return {x: newVal, y: newVal};
  });
};

【讨论】：