Wenn app.js接收到从服务器发送的数据（在控制台中显示），setState不会使用新数据刷新网页。在console.log("Received data queue:", data.queue)的行中，它也返回undefined。我期望它是一个特定的值，因为在console.log(data) in einer Zeile steht, wird der Wert unter der „Warteschlange“-Taste gespeichert.

Das ist mein 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;

Ich möchte, dass die Webseite sofort aktualisiert wird, wenn neue Daten eingehen. Ich habe setState eine Rückruffunktion hinzugefügt, aber sie funktioniert immer noch nicht.