Question

我有使用Hooks的组件：

function App() {
  const [text, setText] = useState({ h1: "hello", h2: "hi" });

  const changeH1 = () => {
    setText({
      ...text,
      h1: text.h1 + "C"
    });
  };

  const changeH2 = () => {
    setText({
      ...text,
      h2: text.h2 + "X"
    });
  };

  const changeAll = () => {
    changeH1();
    changeH2();
  };

  return (
    <div className="App">
      <h1 onClick={() => changeH1()}>{text.h1}</h1>
      <h1 onClick={() => changeH2()}>{text.h2}</h1>
      <button onClick={() => changeAll()}>Change</button>
    </div>
  );
}

它将显示两个标题以及一些文本和一个按钮。当我单击第一个标题时，“ C”字符将添加到标题中。当我单击第二个标题时，“ X”字符将添加到标题中。当我单击按钮时，它将同时执行以上两个操作。

在两个标题上（按钮）都可以正常工作。当我单击按钮时，仅第二个标题会更改。我认为setText中的changeH1和changeH2在changeAll中被调用时不起作用。我的代码有什么问题？

Answer 1

因为changeH2()通过执行h1覆盖了...text属性。

在重新渲染之前执行了两个setText()调用-我相信这是由于https://overreacted.io/react-as-a-ui-runtime/#batching中所述的批处理

一种解决方案是使用简单状态而不是对象：

  const [h1, setH1] = useState("hello");
  const [h2, setH2] = useState("hi");
  ...

否则，useReducer用于更复杂的操作https://reactjs.org/docs/hooks-reference.html#usereducer

当在另一个函数中调用该函数时，React Hooks状态无法正常工作

1 个答案: