Les données reçues de socket.io ne sont pas immédiatement reflétées dans le statut

Question

Lorsque app.js接收到从服务器发送的数据（在控制台中显示），setState不会使用新数据刷新网页。在console.log("Received data queue:", data.queue)的行中，它也返回undefined。我期望它是一个特定的值，因为在console.log(data) est dans une rangée, sa valeur est stockée sous la touche "file d'attente".

Voici mon code :

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;

Je souhaite que la page Web s'actualise immédiatement lorsque de nouvelles données sont reçues. J'ai ajouté une fonction de rappel à setState, mais cela ne fonctionne toujours pas.

Answer 1

Lorsque vous utilisez socket.io dans votre application, vous pouvez rencontrer des retards dans la mise à jour du statut après avoir reçu des données en raison d'un certain nombre de facteurs. Par exemple, la nature asynchrone de socket.io, les problèmes de gestion des états, la gestion des événements, le cycle de vie des composants React, etc.