reactjs - 为什么即使我正在更新状态，我的 React 应用程序也无法重新呈现？

Question

上下文是这样的:我目前正在使用将文档保存在 MongoDB 数据库中的应用程序。我的目标是创建一个 React 应用程序，以事件列表的形式实时显示新插入的文档。每个新事件都必须在此列表的顶部。

我的想法是，我可以在状态中存储一个数组，并将每个新事件添加到该数组的开头。然后，我将通过遍历数组来负责在 EventList 组件中显示列表。

我的问题出在 React 部分:由于某种原因，即使我正在更新状态，我的应用程序也没有重新呈现。

在进一步解释之前，这是我的 React 代码:

import React, { useState, useEffect } from 'react';
import './App.css';
import EventList from '../eventList/EventList.js'

function App(props) {
  const [events, setEvents] = useState([1, 2, 3, 'test']);
  const sse = new EventSource('http://localhost:3002/events', { withCredentials: false, 'Access-Control-Allow-Origin': 'http://127.0.0.1:3002/events' });

  function handleMessage(message) {
    setEvents([message, ...events]);
  }

  useEffect(() => {
    console.log('RENDERED');

    sse.onerror = (e) => {
      console.error();
      sse.close();
    }
    
    sse.onmessage = (e) => {
      handleMessage(e.data);
    };

    return () => {
      sse.close();
    }
  }, []);
  // EventList iterates through events to create <Event/> components with each index of the array
  return <EventList data={events} />
    
}

export default App;

所以在这里，每次我得到一个新事件，而不是预期的结果:(第一个事件包含“foo”，第二个事件包含“bar”)

• 发出的第一个事件:events == ["foo", 1, 2, 3, "test"]
• 发出的第二个事件:events == ["bar", "foo", 1, 2, 3, "test"]

我得到:

• 发出的第一个事件:events == ["foo", 1, 2, 3, "test"]
• 发出的第二个事件:events == ["bar", 1, 2 , 3, "test"]

另一个奇怪的事情是，事件甚至似乎没有更新，但显示的数据却......

有人可以帮我解决这个问题吗？我不知道为什么这不会呈现，我还没有找到解决这个问题的方法...

我确实遇到了一些不同的 stackoverflow 主题，但我觉得尽管它们看起来很像我的问题，但它们无法帮助我解决它。

顺便说一句，如果你想尝试一下并自己看看问题，这里是 repo 的链接: https://git.k-space.ee/rakbaal/camtiler/src/branch/wip (我的应用程序在 wip 分支上)请注意，此应用程序会使用您的网络摄像头，但除了使用它进行运动检测外，它不会执行任何其他操作。您可以在 http://127.0.0.1 访问我的 React 页面

启动应用程序的命令是docker-compose up --build

编辑:我刚刚发现失败的原因。我的目标是每次 events 值改变时重新渲染，所以我必须在 useEffect() Hook 中传递的数组中添加 events 以使其“监听”事件变化。

Answer 1

每次您的组件重新呈现时，它都会构造一个新的 EventSource。我建议您将 EventSource 的实例移到 useEffect Hook 中:

useEffect(() => {
    console.log('MOUNTED');

    const sse = new EventSource('http://localhost:3002/events', { withCredentials: false, 'Access-Control-Allow-Origin': 'http://127.0.0.1:3002/events' });

    sse.onerror = (e) => {
      console.error(e);
      sse.close();
    }
    
    sse.onmessage = (e) => {
      handleMessage(e.data);
    };

    return () => {
      console.log('UNMOUNTED');
      sse.close();
    }
  }, []);