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

Question

问题是：我试图通过单击按钮调用两个函数。这两个函数都会更新状态（我正在使用useState钩子）。第一个函数将value1正确更新为“new 1”，但在1s（setTimeout）后，第二个函数启动，它将值2更改为“new 2”，但是！它将值1设置回“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;

Answer 1

当调用ChangeValue2时，初始状态保持不变，因此状态会返回初始状态，然后写入value e2属性。

之后下次调用changeValue2时，它将保持状态{value1:“1”，value2:“new 2”}，因此将覆盖value1属性。

setState参数需要一个箭头函数。

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

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

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

ReactDOM.render(<Test />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

你的功能应该是这样的：

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

因此，通过在触发操作时使用前一个状态，可以确保当前状态中没有丢失任何现有属性。因此，您还可以避免管理闭包。

Answer 3

欢迎来到关闭地狱。发生此问题是因为每当调用setState时，state都会获得一个新的内存引用，但是由于闭包，函数Change eValue1和Change eValue2会保留旧的初始state引用。

确保setStatefromChangeValue1和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" }));
  };

  // ...
};

你可以在这里和这里找到关于这个关闭问题的更广泛的讨论。