從socket.io接收的資料不會立即在狀態中反映出來

Question

當app.js接收到從伺服器發送的資料（在控制台中顯示），setState不會使用新資料刷新網頁。在console.log("Received data queue:", data.queue)的行中，它也傳回undefined。我期望它是一個特定的值，因為在console.log(data)的行中，它在「queue」鍵下有儲存的值。

這是我的程式碼：

import React, { Component } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import "./chat.css";
import "./styles.css";
import "./queue.css";
import Chat from "./chat";
import io from "socket.io-client";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queue: [],
      instruction: "",
      user: "",
      hal: "",
      status: "waiting"
    };
  }
  componentDidMount() {
    const socket = io("http://localhost:5000");
    socket.on("connect", () => {
      console.log("Connected to the socket server");
    });

    socket.on("queueData", (data) => {
      console.log("Received data:", data);
      console.log("Received data queue:", data.queue);
      this.setState({ queue: data.queue }, () => {
        console.log(this.state.queue);
      });
      this.setState({ instruction: data.instruction }, () => {
        console.log(this.state.instruction);
      });
      // other attributes, user, hal, status ignored here for simplicity
    });

    this.socket = socket;
  }

  componentWillUnmount() {
    this.socket.disconnect();
  }


  renderData = () => {
    console.log("rendered queue", this.state.queue);
    if (this.state.queue === undefined) {
      return null;
    }
    return this.state.queue.map((task, index) => (
      
        

          {task}
          {index === 0 && this.state.status === "working" && (
            

          )}
        
      
    ));
  };

  render() {
    return (
      

        
        

          {this.renderData()}
          

            Instruction: {this.state.instruction}
          
        
      
    );
  }
}

export default App;

我希望網頁在接收到新資料時立即刷新。我已經在setState中加入了回調函數，但仍然無效。

Answer 1

在應用程式中使用socket.io時，由於多種因素，您可能會遇到在接收資料後更新狀態時出現延遲的情況。例如socket.io的非同步性質、狀態管理問題、事件處理、React元件生命週期等等。