从socket.io接收的数据不会立即在状态中反映出来
当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中加入了回调函数，但仍然无效。
