时间戳

首页 > 解决方案 > React 没有捕获最新的函数回调

javascript - React 没有捕获最新的函数回调

问题描述

在下面的示例中，子组件在单击按钮 5 秒后调用 onFinish 回调。问题是 onFinish 回调可以在这 5 秒内发生变化，但它会调用最后一个捕获的回调。

import React, { useState } from "react";

const Child = ({ onFinish }) => {
  const [finished, setFinished] = useState(false);

  const finish = async () => {
    setFinished(true);
    setTimeout(() => onFinish(), 5000);
  };

  return finished ? (
    <p>Wait 5 seconds and increment while waiting.</p>
  ) : (
    <button onClick={finish}>Click here to finish</button>
  );
};

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <Child onFinish={() => alert(`Finished on count: ${count}`)} />
    </>
  );
}

这个解决方法是用以下内容替换完成：

  const cb = useRef();
  cb.current = onFinish;
  const finish = async () => {
    setFinished(true);
    setTimeout(() => cb.current(), 5000);
  };

有没有更好的方法将回调更新为最新的？

标签： javascriptreactjs

解决方案

是的，您可以检查当前状态并将其与上一个状态进行比较，例如

setFinished((prevState) => newState)

推荐阅读