在父组件 state 中存储回调时过时的关闭

Question

我有以下情况。 我想在父组件的 state 中注册一个 function。 function 关闭子组件中的一些本地 state。 function 在父组件中调用时似乎总是得到一个陈旧的history值。

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [parentState, setParentState] = useState([]);
  const [inc, setInc] = useState(0);

  return (
    <span>
      <StaleList setParent={setParentState} />
      Read from closures: {parentState.map(fn => fn())}
      <br />
      Rerenders from button press: {inc}
      <button onClick={() => setInc(val => val + 1)}>Trigger rerender</button>
    </span>
  );
};

const StaleList = ({ setParent }) => {
  const [history, setHistory] = useState([]);
  const closure = () => history;

  return (
    <div>
      History: {history}{" "}
      <button
        onClick={() => {
          setHistory(["new history value"]);
          setParent([closure]);
        }}
      >
        Click me
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

我怎样才能在这里修复陈旧的闭包，并让闭包在调用时返回最新的history值？ （即见“新的历史价值”反映在父）

游乐场链接

Answer 1

您的代码的问题是，当您在单击按钮时将其推送到 parentState 时，闭包 function 具有历史记录的旧值。

您可以改为使用 useEffect 来更新父级

const StaleList = ({ setParent }) => {
  const [history, setHistory] = useState([]);
  useEffect(() => {
    const closure = () => history;
    setParent([closure]);
  }, [history, setParent]);

  return (
    <div>
      History: {history}{" "}
      <button
        onClick={() => {
          setHistory(["new history value"]);
        }}
      >
        Click me
      </button>
    </div>
  );
};