javascript - useState 钩子设置器错误地覆盖了状态

Question

这是问题所在：我试图在单击按钮时调用 2 个函数。这两个函数都会更新状态（我正在使用 useState 挂钩）。第一个函数将 value1 正确更新为“new 1”，但在 1s (setTimeout) 后第二个函数触发，并将 value 2 更改为“new 2”但是！它将 value1 设置回 '1'。为什么会这样？提前致谢！

import React, { useState } from "react";

const Test = () => {
  const [state, setState] = useState({
    value1: "1",
    value2: "2"
  });

  const changeValue1 = () => {
    setState({ ...state, value1: "new 1" });
  };
  const changeValue2 = () => {
    setState({ ...state, value2: "new 2" });
  };

  return (
    <>
      <button
        onClick={() => {
          changeValue1();
          setTimeout(changeValue2, 1000);
        }}
      >
        CHANGE BOTH
      </button>
      <h1>{state.value1}</h1>
      <h1>{state.value2}</h1>
    </>
  );
};

export default Test;

标签： javascriptreactjsreact-hooks

Answer 1

欢迎来到封闭地狱。发生此问题是因为无论何时setState调用，state都会获取新的内存引用，但函数changeValue1和changeValue2，由于关闭，保留旧的初始state引用。

确保setState从changeValue1和获取最新状态的解决方案changeValue2是使用回调（将先前的状态作为参数）：

import React, { useState } from "react";

const Test = () => {
  const [state, setState] = useState({
    value1: "1",
    value2: "2"
  });

  const changeValue1 = () => {
    setState((prevState) => ({ ...prevState, value1: "new 1" }));
  };
  const changeValue2 = () => {
    setState((prevState) => ({ ...prevState, value2: "new 2" }));
  };

  // ...
};

您可以在此处和此处找到有关此关闭问题的更广泛讨论。