如果该函数在挂钩之外调用

Question

我有一个问题，我不知道如何解决。

基本上，我的想法是，我有一个只需要实例化一次的类（实例化是在 useMemo 中完成的，以便只完成一次），这个类实际上是一个调用处理程序的 websocket 实现（此处为 onCounterChanged）当它从后端接收到消息时），以便更新组件状态，但由于某种原因该处理程序保留旧的计数器状态值。这是代码：

class MyService {
  constructor(onCounterChange) {
    this.onCounterChange = onCounterChange;
  }
  start = () => {
//This setInterval is only used to try to reproduce the reality (an async event so for example 
//when a message is received from the server). So i call this onCounterChange every 2 sec to 
//simulate a message received from the server
    setInterval(() => {
      this.onCounterChange();
    }, 2000);
  };
}

const MyComponent = () => {
  const [counter, setCounter] = React.useState(0);
  const onCounterChanged = () => {
    console.log("onCounterChanged", counter);
    setCounter(counter + 1);
  };
//i'm using useMemo in order to keep the instance of MyService, because i'm doing some stuff
//(connect to the webSocket etc... in this class, i don't want to create an new instance on every 
//render and do the connection to the server again
  const myService = React.useMemo(() => new MyService(onCounterChanged), []);
  React.useEffect(() => {
    myService.start();
  }, []);
  return <div>{counter}</div>;
};

这是一个沙箱，可以查看发生了什么： https://codesandbox.io/s/blazing-tree -z1m99e?file=/src/App.js

您可以看到计数器没有递增，函数 onCounterChange 每秒都会调用一次，但计数器状态不会在该函数内部更新处理程序。我尝试使用 useCallback 修复它，但没有任何效果。

知道如何解决这个问题吗？我不是反应专家，所以如果我遗漏了什么，抱歉。

感谢您的阅读。

Answer 1

您的更新状态存在问题，我做了一些重构。

当您尝试使用旧值更新状态时，您应该使用回调而不是传递“当前”值，避免传递当前状态值，因为它并不总是与实际状态值同步

const onCounterChanged = useCallback(() => {
    setCounter((currentValue) => {
      console.log({ currentValue });
      return currentValue + 1;
    });
  }, [setCounter]);

使用回调将确保您正在使用最新值

这是一个 CodeSandbox： https://codesandbox.io/s/goofy-sanderson-bfq3mh?file=/src/App.js