React - 无法在尚未安装的组件上调用 setState(scaledrone 应用程序)
React - can't call setState on a component that is not yet mounted (scaledrone app)
无论我尝试什么,它都会给我同样的错误;
要么是那个错误,要么是我的推送功能坏了
完整错误是:“警告:无法在尚未安装的组件上调用 setState。这是一个空操作,但它可能表明您的应用程序中存在错误。相反,分配给 this.state
直接或在 App 组件中定义具有所需状态的 state = {};
class 属性。"
import React, { Component } from 'react';
import './App.css';
import Messages from "./Messages";
import Input from "./Input";
class App extends Component {
constructor() {
super();
this.state = {
messages:[],
member: {
username: randomName(),
color: randomColor(),
},
}
this.drone = new window.Scaledrone("Qk3ma3HbEXr6Lwh7", {
data: this.state.member
});
this.drone.on('open', error => {
if (error) {
return console.error(error);
}
const member = {...this.state.member};
member.id = this.drone.clientId;
this.state.member = {...member};
});
const room = this.drone.subscribe("observable-room");
room.on('data', (data, member) => {
const mcopy = this.state.messages;
mcopy.push({member, text: data});
this.setState({mcopy});
});
}
render() {
return (
<div className="App">
<div className="App-header">
<h1>Chat Aplikacija</h1>
</div>
<Messages
messages={this.state.messages}
currentMember={this.state.member}
/>
<Input
onSendMessage={this.onSendMessage}
/>
</div>
);
}
onSendMessage = (message) => {
this.drone.publish({
room: "observable-room",
message
});
}
}
export default App;
您不应在 constructor() 中调用 setState(),从技术上讲,setState 旨在使用新值更新现有状态。您应该将状态操作移至 ComponentDidMount 生命周期。
此外,不要改变状态,而是创建一个克隆然后进行更改。
无论我尝试什么,它都会给我同样的错误; 要么是那个错误,要么是我的推送功能坏了
完整错误是:“警告:无法在尚未安装的组件上调用 setState。这是一个空操作,但它可能表明您的应用程序中存在错误。相反,分配给 this.state
直接或在 App 组件中定义具有所需状态的 state = {};
class 属性。"
import React, { Component } from 'react';
import './App.css';
import Messages from "./Messages";
import Input from "./Input";
class App extends Component {
constructor() {
super();
this.state = {
messages:[],
member: {
username: randomName(),
color: randomColor(),
},
}
this.drone = new window.Scaledrone("Qk3ma3HbEXr6Lwh7", {
data: this.state.member
});
this.drone.on('open', error => {
if (error) {
return console.error(error);
}
const member = {...this.state.member};
member.id = this.drone.clientId;
this.state.member = {...member};
});
const room = this.drone.subscribe("observable-room");
room.on('data', (data, member) => {
const mcopy = this.state.messages;
mcopy.push({member, text: data});
this.setState({mcopy});
});
}
render() {
return (
<div className="App">
<div className="App-header">
<h1>Chat Aplikacija</h1>
</div>
<Messages
messages={this.state.messages}
currentMember={this.state.member}
/>
<Input
onSendMessage={this.onSendMessage}
/>
</div>
);
}
onSendMessage = (message) => {
this.drone.publish({
room: "observable-room",
message
});
}
}
export default App;
您不应在 constructor() 中调用 setState(),从技术上讲,setState 旨在使用新值更新现有状态。您应该将状态操作移至 ComponentDidMount 生命周期。
此外,不要改变状态,而是创建一个克隆然后进行更改。