javascript - 在父组件状态中存储回调时过时的关闭

Question

我有以下情况。我想在父组件的状态下注册一个函数。该函数关闭子组件中的某些本地状态。该函数似乎总是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调用时的最新值？（即见“新的历史价值”反映在父）

游乐场链接

标签： javascriptreactjsclosures

Answer 1

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

您可以改为使用 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>
  );
};