当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中加入了回调函数，但仍然无效。