Reactjs 显示我是否加入聊天应用程序时出现问题

我对react 和表达有一点经验.我正在try 建立一个使用Socket io的聊天应用程序.我是第一次用它.但我想在看了一些文档和YouTube视频后，我有一点明白了.现在，当有人进入同一个房间时，他们可以交流.现在，假设我已经在房间里，有人加入了房间，然后我想看到那个人加入了房间，我成功地将其转化为逻辑，它起作用了.但是，当我进入房间时，我想向自己显示这样的信息:"您进入了房间"，其他人会看到"我的名字进入了房间".我提出了逻辑，但不知何故，它并不起作用.我试着聊天，但我最终让他明白了其中的逻辑:/

我有一个名为App的父组件和两个名为Join的子组件，前者是加入聊天室的表单，后者是消息正文.我从Join到父应用程序中获取输入(姓名、房间)，并将它们作为props 传递给消息.这是我的消息组件状态--&gt；

this.state = {
      messages: [],
      inputMessage: "",
      joinedName: "",
      joinedRoom: "",
    };

这是一个组件Didmount生命周期，每当一个人发送和消息或加入房间时，它都会改变状态--&gt；

componentDidMount() {
    const { room, name } = this.props;
    this.props.socket.emit("join-room", { room, name });
    this.props.socket.on("joined-room", (receivedName) => {
      this.setState({
        joinedName: receivedName,
        joinedRoom: receivedName === name ? "me" : "other",
      });
    });

    this.props.socket.on("receive-message", (newMessage) => {
      this.setState((prevState) => ({
        messages: [...prevState.messages, { content: newMessage, sender: "other" }],
      }));
    });
  }

为了了解更多信息，下面是我的服务器的相关部分--&gt；

socket.on("join-room", (data) => {
        socket.join(data.room);
        socket.to(data.room).emit("joined-room",data.name)
    })

如你所见，每当有人进入房间时，我都会发送姓名和房间.并相应地更改状态，并且我正在判断我从服务器收到的名称是否是我之前从props 中提供的名称.如果是，那么房间就是我，否则就是其他的.然后，稍后我将使用joinedRoom状态来显示我或其他人是否进入了房间.以下是如何--&gt；

{joinedName && (
            <div
              className={`bg-light-gray br3 rounded-lg pa2 mb2 self-end`}
              style={{
                color: "#fff",
                background: "rgb(148, 61, 255)",
              }}
            >
              <p className="ma0">
                {joinedRoom === "me" ? "You" : joinedName} joined the room
              </p>
            </div>
          )};

然后，如果有人加入房间，我将呈现此div.我正在签入p标记，无论它是不是我，并相应地呈现p标记，如您所见.

现在的问题是，当我加入房间时，我没有看到"您加入了房间"div.但当其他人进入房间时，我可以看到"圣名进入了房间".这里的缺陷是什么？