如何避免React会话组件重复渲染引发的后端数据重复拉取问题

问题根因 #

核心是三个问题共同导致展示异常：

• 全局状态冲突：所有ConversationList组件共享Redux store中同一个accountById单值字段，后拉取的好友信息会覆盖之前的值，所有子组件都会读取到最后一次拉取的用户数据
• 错误的子组件key：使用数组下标作为ConversationList的key，React会在列表变化时错误复用组件实例，加重状态混乱
• useEffect依赖缺失：当前ConversationList的useEffect未将currentConversation加入依赖，会话更新时不会重新拉取对应用户信息

修复方案 #

步骤1：调整Redux存储结构（必改） #

将原存储单个用户信息的accountById字段，调整为按用户id映射的字典结构accountByIdMap，getAccountById请求成功后，将返回的用户信息按{[用户id]: 用户信息}的格式存入该字典，避免不同请求的结果互相覆盖。

步骤2：修正子组件key #

不要用数组下标作为key，替换为会话的唯一标识字段：

// Conversation.js 修正部分
{conversationInfo.map((conversation) => (
  <ConversationList
    key={conversation.id} // 替换为会话的唯一id字段即可
    currentConversation={conversation}
    currentUser={currentAccountInfo._id}
  />
))}

步骤3：重写ConversationList逻辑 #

// conversationList.js 修正后代码
const ConversationList = ({ currentConversation, currentUser }) => {
  const dispatch = useDispatch();
  // 从store读取用户信息映射表
  const accountByIdMap = useSelector((state) => state.accountGetById.accountByIdMap);

  // 计算当前会话对应的好友id
  const friendId = currentConversation.members.find(id => id !== currentUser);
  // 从映射表直接取当前好友的信息，无需额外本地state存储
  const currentFriend = accountByIdMap?.[friendId];

  useEffect(() => {
    // 仅当好友id存在、且好友信息未拉取过时触发请求
    if (friendId && !currentFriend) {
      dispatch(getAccountById(friendId));
    }
  }, [friendId, currentFriend, dispatch]);

  return (
    <div className='w-full'>
      <div className='mb-6 flex cursor-pointer'>
        <div className='relative'>
          <img
            className='mr-4 rounded-full'
            src={currentFriend?.accountProfileUploaded}
            alt={currentFriend ? `${currentFriend.firstName} ${currentFriend.lastName}` : ''}
            title={currentFriend ? `${currentFriend.firstName} ${currentFriend.lastName}` : ''}
            style={{ width: '42px', height: '42px' }}
          />
        </div>
        <p className='text-xs text-grey font-bold'>
          {currentFriend ? `${currentFriend.firstName} ${currentFriend.lastName}` : ''}
        </p>
      </div>
    </div>
  );
};

可选优化方案 #

如果你不想修改Redux结构，也可以将用户信息拉取逻辑上移到父组件Conversation中，遍历会话列表时一次性拉取所有关联的好友信息，组装好完整的会话数据后再传给ConversationList组件，子组件只负责渲染无需发请求，也能彻底避免状态冲突问题。

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