React组件map()仅输入重绘时显新消息，useEffect不触发求助

现象 #

• 发送消息后，消息列表的map()渲染仅在输入框输入内容触发重绘时才会显示新消息
• 消息监听器工作正常，发送后控制台立即打印新消息，React开发者工具中messages状态也已更新
• 依赖messages的useEffect未在新消息到来时触发，仅在输入框输入内容后才执行

组件代码 #

import { useState, useEffect, useRef } from "react";

const ChatWindowChannel = ({ window, chat }) => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState("");
  const loaded = useRef(null);
  const messagesEndRef = useRef(null);

  const channelMessagesHandler = async () => {
    const channelMessagesListener = await chat.loadMessagesOfChannel(window);

    channelMessagesListener.on((msgs) => {
      console.log(msgs); // 发送后立即显示新消息，正常
      setMessages(msgs); // DevTools显示状态已更新，正常
      console.log(messages); // 始终显示空数组，异常
    });
  };

  async function send() {
    await chat.sendMessageToChannel(window, message, {
      action: "join",
      alias: chat.gun.user().alias,
      pubKey: chat.gun.user().is.pub,
      name: "grizzly.crypto",
    });
    setMessage("");
  }

  useEffect(() => {
    console.log("Messages changed"); // 仅触发一次，异常
  }, [messages]);

  useEffect(() => {
    loaded.current !== window.key && channelMessagesHandler();
    loaded.current = window.key;
  }, [window]);

  return (
    <div>
      <div className="ChatWindow">
        <h2>
          Channel {window.name} - {window.isPrivate ? "Private" : "Public"}
        </h2>
        <div>
          <details style={{ float: "right" }}>
            <summary>Actions</summary>
            <button
              onClick={async () => {
                await chat.leaveChannel(window);
              }}
            >
              Leave channel
            </button>
          </details>
        </div>
        <div className="msgs">
          {messages.map((message, key) => (
            <div key={`${key}-messages`}>
              <small>{message.time}</small>{" "}
              <small>{message.peerInfo.alias}</small> <p>{message.msg}</p>
              <div ref={messagesEndRef} />
            </div>
          ))}
        </div>
        <div>
          <div>
            <input
              type="text"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") send();
              }}
            />
          </div>
          <div>
            <button onClick={send}>Send</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatWindowChannel;

问题原因 #

1. 闭包陷阱：监听器回调捕获的是组件初始渲染时的messages状态，所以直接在回调里console.log(messages)会一直显示初始的空数组，但这不是渲染延迟的核心原因。
2. 数组引用未变更：chat.loadMessagesOfChannel返回的监听器触发时，传递的msgs可能是同一数组引用的修改版（比如直接在原数组上push新元素）。React依赖状态值的引用变化来触发重渲染，当数组引用未变时，即使内容更新，React也不会触发组件重绘，自然也不会执行依赖messages的useEffect。
3. 输入框触发重绘的本质：输入框输入内容时，setMessage触发了组件重渲染，此时React会重新读取messages的当前值（已更新内容），因此map()会渲染新消息。

修复方案 #

1. 强制创建新数组引用 #

在监听器回调中，通过扩展运算符或Array.from创建新数组，确保setMessages接收的是新引用：

channelMessagesListener.on((msgs) => {
  console.log(msgs);
  // 扩展运算符创建新数组
  setMessages([...msgs]);
  // 或使用Array.from
  // setMessages(Array.from(msgs));
});

2. 验证底层库的数据不可变性 #

检查chat库的loadMessagesOfChannel方法，是否支持配置为每次返回新数组而非修改原数组。如果有相关配置，开启不可变性模式可以从根源解决问题。

3. 修正状态日志输出 #

由于状态更新是异步的，且回调存在闭包问题，要查看更新后的messages状态，应使用依赖messages的useEffect：

useEffect(() => {
  console.log("当前messages状态:", messages);
}, [messages]);

修复后的核心代码片段 #

const channelMessagesHandler = async () => {
  const channelMessagesListener = await chat.loadMessagesOfChannel(window);

  channelMessagesListener.on((msgs) => {
    console.log(msgs);
    // 创建新数组触发React重渲染
    setMessages([...msgs]);
  });
};

内容的提问来源于stack exchange，提问作者Kenn Wong