React Hook 设置值在内部不起作用 EventSource.onmessage

Question

我将在下面展示我的 React 项目的 SSE 部分的简化版本。

出于某种原因，我无法更改 EventSource.onmessage 函数中变量的状态。

function App() {
  const [variable, setVariable] = useState("qwerty");

  const mockFunc = () => {
    let eventSource = new EventSource("http://localhost:5000/stream");
    eventSource.onmessage = function (e) {
      console.log("variable:", variable);
      setVariable("abc");
    };
  };


  useEffect(() => {
    console.log("UseEffect: ",variable);
  }, [variable]);



return (
        <div>
          <button onClick={mockFunc}>updateVariable</button>
       </div>
      );
    }
    
    export default App;

从 Flask 端，我每 5 秒发送一条消息，并在 React 端成功接收到它。但是，出于某种原因，setVariable 无法正常工作，因为 variable 的值实际上并未被设置。这是程序生成的日志。

variable: qwerty

UseEffect: abc

variable: qwerty

..不确定

也就是说，setVariable不仅不会多次触发useEffect，它实际上是将值重置为原来的setState(?)。

这对我来说没有任何意义。如果我创建一个按钮来使用 setVariable 更改变量值，它工作正常，所以我不明白为什么它不能以这种方式工作。

提前致谢

Answer 1

这是 onmessage 回调处理程序中 variable 状态值的陈旧外壳。

您可以使用 React 引用和 useEffect 挂钩来缓存 variable 状态值并在 onmessage 回调中访问缓存的值。

示例：

function App() {
  const [variable, setVariable] = useState("qwerty");

  const variableRef = useRef();

  useEffect(() => {
    variableRef.current = variable;
  }, [variable]);

  const mockFunc = () => {
    let eventSource = new EventSource("http://localhost:5000/stream");
    eventSource.onmessage = function (e) {
      console.log("variable:", variableRef.current);
      setVariable("abc");
    };
  };

  useEffect(() => {
    console.log("UseEffect: ", variable);
  }, [variable]);

  return (
    <div className="App">
      <button onClick={mockFunc}>updateVariable</button>
    </div>
  );
}

日志输出：

React Hook 设置值在内部不起作用 EventSource.onmessage

React Hook set value not working inside EventSource.onmessage

reactjs

react-hooks

server-sent-events