0

我在处理 React 应用程序的 socket.io 客户端中发出的消息流时遇到问题。在后端，我有一个快速服务器，它从 twitter api 获取一个流，对于流中的每条消息，我通过 socket.io 服务器发出一条消息。

在客户端，我使用 useEffect 挂钩来实例化 socketio 客户端，然后打开套接字，当我收到新事件时，我将组件的状态与新事件连接起来。

我遇到的问题是状态不断被最新事件覆盖，而不是迄今为止收到的所有事件的数组。当我使用推送而不是连接到数组来改变状态时，我可以看到数组增长，所以我认为问题在于我连接到的状态是我开始接收事件之前的原始状态。我不确定如何在不改变我知道是不好的做法的状态的情况下处理这个问题。下面是一些涉及的代码：

const TestComponent = props => {
  const [testList, setTestList] = useState([]);

  useEffect(() => {
      const socket = socketIOClient(ENDPOINT);

      socket.on("newData", data => {
        const updatedList = testList.concat(data.newData);

        setTestList(updatedList);
      });
  }, []);
4

2 回答 2

0

看起来您忘记添加testList依赖项数组：

useEffect(() => {
     // ...
}, [testList]);

不要忘记清除您的订阅。

于 2020-05-10T01:39:13.010 回答
0

如果您想将新数据推送到您的现有状态数组中：

const TestComponent = props => {
  const [testList, setTestList] = useState([]);

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);

    socket.on("newData", data => {
      setTestList([
        ...testList,
        data.newData
      ]);
    });
  }, []);
};

通过使用 [...arr, item]，您可以创建一个新数组，添加 arr 中的所有元素，并将一个项目推入数组。

于 2020-05-10T01:41:18.103 回答