ReactJS聊天组件如何让typing indicator仅在消息底部显示一次

API 探路者

2026-10-2

问题根因

Typing 提示逻辑写在了单条消息渲染组件ShowMessages内部，你有多少条消息就会调用多少次该组件，自然会重复渲染出对应数量的Typing提示。

修改方案

第一步：精简ShowMessages组件，仅保留单条消息渲染逻辑，移除 Typing 相关代码和不必要的状态引用：

import React from "react";

function ShowMessages({ idx, item }) {
  return (
    <li className={item.direction === "send" ? "replies" : "sent"} key={idx}>
      <div className="media-body">
        <h5>{item.body}</h5>
      </div>
    </li>
  );
}

export default ShowMessages;

第二步：在循环渲染ShowMessages的父组件中，将Typing提示放在消息列表循环的末尾，保证全局仅渲染一次，参考父组件代码：

import React from "react";
import { useSelector } from "react-redux";
import ShowMessages from "./ShowMessages";

function ChatContainer() {
  const chatWith = useSelector((state) => state.user.chatWith);
  // 替换为你实际的消息列表数据源
  const messageList = useSelector(state => state.chat.messageList);

  return (
    <ul className="chat-message-list">
      {/* 循环渲染所有聊天消息 */}
      {messageList.map((item, idx) => (
        <ShowMessages key={idx} idx={idx} item={item} />
      ))}
      {/* 所有消息底部仅渲染一次Typing提示 */}
      {chatWith.isTyping === "composing" && <li className="sent">Typing</li>}
    </ul>
  );
}