在 React 中检索 State 的先前值的方法答案

【问题标题】：Ways of retrieving previous value of State in React在 React 中检索 State 的先前值的方法
【发布时间】：2022-11-17 02:41:04
【问题描述】：

const [fullName, setFullName] = useState({
    fName: "",
    lName: ""
  });

function handleOnChange(event) {

const newValue = event.target.value;
const inputName = event.target.name;

我正在从反应表单中获取输入，该表单有 2 个输入 - fName 和 lName。现在我发现我可以通过以下两种方式更新名字和姓氏。

setFullName((preValue) => {
      if (inputName === "fName") {
        return { ...preValue, fName: newValue };
      } else if (inputName === "lName") {
        return { ...preValue, lName: newValue };
      }
)

if (inputName === "lName") setFullName({ ...fullName, lName: newValue });
else if (inputName === "fName") setFullName({ ...fullName, fName: newValue });

但是当我在网上看到例子时，我看到每个人都是通过回调函数（即第一种方法）来访问状态的先前值。这样做有什么特别的好处吗？

【问题讨论】：

是的，引用自 React：在后续重新渲染期间，useState 返回的第一个值将始终是应用更新后的最新状态。

标签： reactjs react-hooks

【解决方案1】：

在许多情况下，不会有任何有意义的差异。大多数教程涵盖了简单的状态更新，实际上我在 React 中看到/编写的大部分逻辑都是简单的状态更新。（毕竟，构建许多简单组件比构建少量复杂组件要好。）

然而，有时状态更新并不那么简单。有时，逻辑会批量处理多个状态更新。作为一个人为的例子，考虑这个逻辑：

if (editedFirstName) {
  setUser({ ...user, firstName: newFirstName });
}
if (editedLastName) {
  setUser({ ...user, lastName: newLastName });
}

暂时忽略是什么 UX 驱动这个或者是否有更好的方法来更新对象，我们这里有两个不同的状态更新可能发生在同一个操作中。这些更新将作为同一重新渲染操作的一部分进行批处理和处理。

但是这两个状态更新的结果是什么？后一个将破坏前一个，因此 firstName 从未在 User 状态对象中更新。两个状态更新都已处理，但第二个状态更新使用组件呈现时可用的 firstName 值，不是第一次状态更新设置的firstName值。

这是回调变得有用的地方：

if (editedFirstName) {
  setUser(prev => ({ ...prev, firstName: newFirstName }));
}
if (editedLastName) {
  setUser(prev => ({ ...prev, lastName: newLastName }));
}

现在可以成功应用两个状态更新。这是因为，在批处理时，每个后续更新都会使用该批次中先前更新的状态，而不仅仅是组件呈现时可用的状态。

回调结构只允许我们使用状态的任何值会有处理更新时，而不是状态的任何值已经有当更新被批处理/排队时。

【讨论】：