React - 无法在尚未安装的组件上调用 setState（scaledrone 应用程序）

Question

无论我尝试什么，它都会给我同样的错误； 要么是那个错误，要么是我的推送功能中断了

完全错误是：“警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。相反，直接分配给 this.state 或在 App 组件中定义具有所需状态的 state = {}; 类属性。”

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;

Answer 1

你不应该在 constructor() 中调用 setState()，从技术上讲，setState 是为了用新值更新现有状态。您应该将状态操作移至 ComponentDidMount 生命周期。

另外，不要改变状态，而是先克隆然后再进行更改。