node.js - 带有React的Socket.io在出现5条消息后表现异常

Question

我正在尝试使用socket.io构建一个基本的聊天应用程序并使用react，但遇到了一个奇怪的问题。该应用程序的工作方式与预期的前5条消息相同，然后，第6条消息加载所需的时间太长，并且通常某些先前的消息不会显示在聊天框中。如果有人可以帮助，我们将非常高兴。
这是我用于后端的代码:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', socket => {
  socket.on('message', ({ name, message }) => {
    io.emit('message', { name, message });
    console.log(message);
    console.log(name);
  });
});

http.listen(4000, function () {
  console.log('listening on port 4000');
});

这是我App.js中的代码:

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const App = props => {
  const socket = io.connect('http://localhost:4000');
  const [details, setDetails] = useState({ name: '', message: '' });
  const [chat, setChat] = useState([]);


  useEffect(() => {
    socket.on('message', ({ name, message }) => {
      setChat([...chat, { name, message }]); //same as {name:name,message:message}
    });
  });

  const onMessageSubmit = e => {
    e.preventDefault();
    const { name, message } = details;
    socket.emit('message', { name, message });
    setDetails({ name, message: '' });
  };

  return (
    <div>
      <form onSubmit={onMessageSubmit}>
        <input
          type='text'
          value={details.name}
          onChange={e => setDetails({ ...details, name: e.target.value })}
        />
        <input
          type='text'
          value={details.message}
          onChange={e => setDetails({ ...details, message: e.target.value })}
        />
        <button>Send</button>
      </form>
      <ul>
        {chat &&
          chat.map((chat, index) => (
            <li key={index}>
              {chat.name}:{chat.message}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default App;

Answer 1

这是因为每次更新状态，都会运行useEffect回调，基本上是一次又一次地订阅message。
在几次迭代之后，您就有多个订阅试图更新同一状态。并且由于setState的异步特性，您会看到奇怪的行为。
您只需要订阅一次，就可以通过向useEffect传递空的依赖项参数来做到这一点，这将使其像componentDidMount一样工作

 useEffect(() => {
    socket.on('message', ({ name, message }) => {
      setChat([...chat, { name, message }]);
    });
  }, []);

编辑-要处理 异​​步并考虑上一次聊天，您需要通过回调来 setState

useEffect(() => {
  socket.on("message", ({ name, message }) => {
    setChat((prevChat) => prevChat.concat([{ name, message }]));
  });
}, []);

卸载组件时，您可能需要 cleanup。请看看 official docs。