Von socket.io empfangene Daten spiegeln sich nicht sofort im Status wider
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.
