如何在 React 中更改消息的可见状态？

状态？"/>

如何在 React 中更改消息的可见状态？

我有一个用React的聊天程序，但是我不知道如何实现消息的阅读状态。

后端：

socket.on("read_message", async({message_id})=>{
    const updated_message = await Message.findByIdAndUpdate(message_id, {is_read: true}, {new: true});
    if(updated_message){
      socket.emit("road_message", {
        status: 'success'
      })
    }
  })

messageContainer

const MessageContainer = ({ messages }) => {
  const messageRef = useRef(null);
  useEffect(() => {
    const domNode = messageRef.current;
    if (domNode) {
      domNode.scrollTop = domNode.scrollHeight;
    }
  }, [messages.length]);
  return (
    <div
      id="messages"
      className="scroll-smooth flex flex-col h-full space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-purple scrollbar-thin scrolling-touch"
      ref={messageRef}
    >
      {messages.length > 0 ? (
        <>
          {messages.map((message, index) => (
            <Message message={message} key={index} />
          ))}
        </>
      ) : (
        <NoMessage />
      )}
    </div>
  );
};

export default MessageContainer;

消息组件：

const Message = ({ message }) => {
  const isMe = window.localStorage.getItem('user_id') === message.from;
  useEffect(()=>{
    const readMessage = ()=>{
      if (!isMe && message.is_read === false) {
        socket.emit('read_message', {
          message_id: message._id,
        });
      }
    }
    readMessage();
    socket.on("road_message", ({status})=>{
      if(status === 'success') {}
    })
  },[isMe, message])
  
  return isMe ? (
    <OutcomingMessage message={message} />
  ) : (
    <IncomingMessage message={message} />
  );
};

export default React.memo(Message);

不知道怎么实现。请帮助我！

首先，你的

Message

socket.on("road_message"

socket.on("read_message"

然后，要显示阅读状态，在 UI 上，您可以设置一个状态，例如在

isRead

Message

OutcomingMessage

import { useState, useEffect } from "react";

const Message = ({ message }) => {
  const isMe = window.localStorage.getItem("user_id") === message.from;
  const [isRead, setIsRead] = useState(false);
  useEffect(() => {
    const readMessage = () => {
      if (!isMe && message.is_read === false) {
        socket.emit("read_message", {
          message_id: message._id,
        });
      }
    };
    readMessage();
    socket.on("read_message", ({ status }) => {
      if (status === "success") {
        setIsRead(true);
      }
    });
  }, [isMe, message]);

  return isMe ? (
    <OutcomingMessage message={message} isRead={isRead} />
  ) : (
    <IncomingMessage message={message} />
  );
};

export default React.memo(Message);

和

OutcomingMessage

const OutcomingMessage = ({ message, isRead }) => {
  return (
    <>
      {isRead && <p>Message read</p>} <div>{message.whatever}</div>
    </>
  );
};