React中WebSocket更新数组后表格仅显示最新元素的问题解决

核心问题：React状态更新的不可变性要求 #

React依赖引用变化触发组件重渲染。你当前代码直接修改原数组的引用（比如tempEntries = entryArray是指向原数组的引用，push后数组内容改变但引用未变），导致React无法检测到状态变化，因此表格没有重新渲染展示所有元素。

具体修复步骤 #

1. 修复userAdd事件的数组添加逻辑 #

不要直接修改原数组，创建新数组后再更新状态：

// Add new entry
useEffect(() => {
  const handleUserAdd = (data) => {
    // 用扩展运算符创建原数组副本，再添加新元素
    const newEntries = [...entryArray, { address: data[0], amount: data[1] }];
    setEntryArray(newEntries);
  };

  socket.on("userAdd", handleUserAdd);
  return () => {
    socket.off("userAdd", handleUserAdd);
  };
}, [entryArray]); // 将entryArray加入依赖数组，确保每次能拿到最新数组

2. 修复userUpdate事件的数组更新逻辑 #

使用函数式更新确保拿到最新状态，同时修正业务逻辑（原代码误将address改为"updated"，应更新amount）：

useEffect(() => {
  const handleUserUpdate = (data) => {
    // 函数式更新，直接基于最新状态修改
    setEntryArray(prevEntries => prevEntries.map(
      (element: TableEntry) =>
        element.address === data[0]
          ? { ...element, amount: data[1] } // 修正为更新amount字段
          : element
    ));
  };

  socket.on("userUpdate", handleUserUpdate);
  return () => {
    socket.off("userUpdate", handleUserUpdate);
  };
}, []); // 函数式更新无需将entryArray加入依赖

3. 移除冗余代码 #

删除原代码中多余的tempEntries = []语句，该操作对状态更新无任何作用。

额外注意事项 #

• 确保entryArray的初始值为数组类型（如const [entryArray, setEntryArray] = useState<TableEntry[]>([])），避免entryArray?.map因初始值非数组出现异常。
• 若address存在重复可能，不能用entry.address作为列表key，需改用唯一标识字段（如给每个条目添加id），否则React列表渲染会出现异常。

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