React hook stale 关闭：setState 仅在订阅的回调 function 中触发两次

Question

我正在尝试为 React 构建一个 toast 消息 API。 我的目标是提供一个fireNotification() api，它可以在应用程序的任何地方调用，并让 React 渲染 toast 组件。

我用 sub/pub 模式构建了这个简单的通知管理器，并希望能够在useEffect挂钩中订阅新通知

const notifications = [];

const listeners = new Set();

function subscribe(callback) {
  listeners.add(callback);
}

function publish() {
  listeners.forEach((cb) => {
    cb(notifications);
  });
}
export function fireNotification(content) {
  notifications.push(content);
  publish();
}

export default function App() {
  const [state, setState] = React.useState();
  React.useEffect(() => {
    subscribe((updated) => {
      setState(updated);
    });
  }, []);

  // state will be logged correctly 2 times
  // won't be updated after that
  console.log("state", state);
  return (
    <div className="App">
      <button onClick={() => {fireNotification('test')}}>fire</button>
    </div>
  );
}

密码箱

然而， fireNotification()只会触发两次setState

从第三次开始，state 根本没有更新。

我可以通过将setState(updated)更改为setState([...updated])来使 state 更新工作，但不确定它为什么有效。

有人可以解释为什么setState(updated); 只触发两次？ 谢谢！

Answer 1

您需要向 useEffect 提供数据以观察变化

React.useEffect(() => {
subscribe((updated) => {
  setState(updated);
});
}, [updated]);

否则 useEffect 将只运行两次