Node.js 如何在React中显示组件，并在每次显示组件时更新其生命周期？

我刚开始使用node.js和react，我很好奇如何使用socket.io创建聊天应用程序，所以我学习了一些关于如何创建聊天室、加入/离开聊天室以及在聊天室中发送消息的教程。我使用React上下文传递一个套接字实例

我可以创建房间，加入他们，离开他们。我遇到的问题是，当我加入另一个房间并尝试发送消息时，我收到以下警告：

无法对未安装的组件执行React状态更新。渲染组件时。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务

您能给我一些建议，告诉我在这种情况下，我应该如何重新考虑使用

componentDidMount

和

componentWillUnmount

函数重写React

我想添加以下详细信息，以了解我正在尝试做什么： -用户可以创建房间的主页 -聊天室生成为两个按钮，一个显示聊天室（加入聊天室），另一个关闭聊天室（离开聊天室） -用户可以加入聊天室并发送消息

客户端（Home.js）

---

这个错误通常意味着可能的内存泄漏

据我猜测，可能是插座连接造成的。这样看吧

在

组件didmount

中，设置套接字连接。如果您在未关闭套接字连接的情况下离开组件，则肯定会收到此错误。我不确定您到底在做什么，但请尝试关闭

组件willunmount

中的套接字，看看它是否有效

---

如果确实如此，请考虑在导航中不被破坏的组件中创建套接字，或者在ReDux

中存储套接字连接。谢谢您的快速回复！我在帖子中补充了我要做的事情。关于你的建议，我不明白的是为什么我必须关闭插座连接？因为套接字连接允许我在聊天室中创建聊天室、加入/离开聊天室、发送消息？套接字连接可能占用全局空间。当它这样做时，当组件卸载时，全局空间实际上可能正在调用一个不再存在的变量，占用内存。。。让我知道如果你明白我的意思，那就像我关闭聊天室，然后加入另一个聊天室，套接字连接试图调用这个不再存在的组件？组件将如何卸载修复此问题？或多或少，是的。如果安装了ReDux，请考虑将套接字对象放入其中。毕竟，它是一个物体

class Home extends Component {
 constructor(props) {
 super(props);

  this.state = {
   room: "",
   rooms: [],
   chat: false
  };

  this.creatingRoom = this.creatingRoom.bind(this);
  this.joinRoom = this.joinRoom.bind(this);
  this.leaveRoom = this.leaveRoom.bind(this);

  this.props.socket.on("createRoom", function(room) {
   addRoom(room);
  });

  const addRoom = room => {
   this.setState({ rooms: [...this.state.rooms, room] });
  };
 };

 creatingRoom(e) {
  e.preventDefault();
  this.props.socket.emit("creatingRoom", {
   room: this.state.room
  });

  this.setState({ room: "" });
 };

 joinRoom(e) {
  let room = e.target.value;
  this.props.socket.emit("joinRoom", room);

  this.setState({
   chat: true
  });
 };

 leaveRoom(e) {
  let room = e.target.value;
  this.props.socket.emit("leaveRoom", room);

  this.setState({
   chat: false
  });
 };

 render() {
  return (

   <React.Fragment>

    {this.state.chat === true ? (
      <ChatroomWithSocket />
    ) : (
      <h1> no chatroom </h1>
    )}

    <div>
      <h1> Create your room </h1>
    </div>

    <div>
      <form>
        <textarea
          name="room"
          placeholder="Write.."
          value={this.state.room}
          onChange={ev => this.setState({ room: ev.target.value })}
        />
        <button onClick={this.creatingRoom}>
          Create
        </button>
      </form>
    </div>

    <div>
      <h4> Rooms </h4>
      <div>
        <ul>
          {this.state.rooms.map((room, index) => {
            return (
              <li key={index}>
                <button href="#" onClick={this.joinRoom} value={room.room}>
                  Join {room.room}
                </button>
                <button href="#" onClick={this.leaveRoom} value= 
                 {room.room}>
                  Leave {room.room}
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </div>

   </React.Fragment>
  );
 }
}

const HomeWithSocket = props => (
 <SocketContext.Consumer>
  {socket => <Home {...props} socket={socket} />}
 </SocketContext.Consumer>
);

class Chatroom extends Component {
 constructor(props) {
 super(props);

 this.state = {
  message: "",
  messages: []
 };

 this.sendMessage = this.sendMessage.bind(this);

 this.props.socket.on("receiveMessage", function(data) {
  addMessage(data);
 });

 const addMessage = data => {
  this.setState({ messages: [...this.state.messages, data] });
 };
}

  sendMessage(e) {
   e.preventDefault();
   this.props.socket.emit("sendMessage", {
   message: this.state.message
   });

   this.setState({ message: "" });
  }

render() {
 return (
  <React.Fragment>
    <div className="messages">
      {this.state.messages.map((message, key) => {
        return <li key={key}>{message.message}</li>;
      })}
    </div>

    <div>
      <form onSubmit={this.sendMessage}>
        <input
          type="text"
          placeholder="Message"
          value={this.state.message}
          onChange={ev => this.setState({ message: ev.target.value })}
        />
        <button type="submit"> 
          Send
        </button>
      </form>
    </div>
   </React.Fragment>
  );
 }
}

const ChatroomWithSocket = props => (
 <SocketContext.Consumer>
  {socket => <Chatroom {...props} socket={socket} />}
 </SocketContext.Consumer>
);

var rooms = [];

io.on("connection", function(socket) {

 socket.on("creatingRoom", function(room) {
  rooms.push(room);
  io.emit("createRoom", room);
 });

 socket.on("joinRoom", function(newRoom) {
  socket.join(newRoom);
  socket.room = newRoom;
 });

 socket.on("leaveRoom", function() {
  socket.leave(socket.room);
 });

 socket.on("sendMessage", function(data) {
  io.emit("receiveMessage", data);
 });
});