React组件如何在嵌套对象announcement.attachments变更时重渲染？

问题原因 #

React Context的更新机制是浅比较：只有当Context提供的announcement对象本身的引用发生变化时，订阅该Context的组件才会触发重渲染。你现在只是修改了announcement.attachments这个嵌套属性，announcement对象的引用没变，所以AttachmentsTab组件不会感知到变化，自然不会重渲染。你在组件内部复制attachments的操作，只是在当前渲染周期内创建了新对象，但没法触发Context的更新通知。

解决方案 #

方案1：更新Context时保持不可变性（推荐） #

在修改announcement.attachments的地方，不要直接修改原对象，而是创建一个全新的announcement对象，确保引用更新。示例代码：

// 假设你在Context的状态更新函数中修改attachments，改成如下写法
setAnnouncement(prevAnnouncement => ({
  ...prevAnnouncement, // 复制原对象的所有属性
  attachments: {
    ...prevAnnouncement.attachments, // 复制原attachments的所有属性
    // 这里修改需要更新的嵌套属性，比如carrier或shipper
    carrier: updatedCarrierAttachments,
    shipper: updatedShipperAttachments
  }
}));

这样announcement的引用会更新，Context会通知所有订阅组件重渲染，AttachmentsTab就能感知到attachments的变化。

方案2：组件内监听嵌套属性变化强制重渲染 #

如果无法修改Context的更新逻辑，可以在AttachmentsTab组件内通过useEffect监听attachments的具体子属性变化，配合useState触发重渲染：

export const AttachmentsTab = () => {
  const { announcement } = useAnnouncement();
  const [, forceRender] = useState({});

  // 监听attachments下的carrier和shipper变化，变化时触发重渲染
  useEffect(() => {
    forceRender({}); // 更新一个空对象触发组件重渲染
  }, [announcement.attachments?.carrier, announcement.attachments?.shipper]);

  const noAttachments =
    !announcement.attachments?.carrier &&
    !announcement.attachments?.shipper;

  return (
    <Wrapper>
      {noAttachments ? (
        <EmptyContent
          title={labels.noAtt}
          message={labels.noAttDescr}
        />
      ) : (
        <Rows>
          <Items attachments={announcement.attachments?.shipper} />
          <Items attachments={announcement.attachments?.carrier} />
        </Rows>
      )}
    </Wrapper>
  );
};

方案3：自定义深层比较的Context订阅（不推荐） #

可以写一个自定义Hook，通过深层比较来判断attachments是否变化，从而触发组件重渲染，但这种方法会增加额外的性能开销，仅作为备选：

import { useContext, useEffect, useState } from 'react';
import { isEqual } from 'lodash'; // 需引入lodash的isEqual做深层比较

const useDeepAnnouncementAttachments = () => {
  const { announcement } = useAnnouncement();
  const [attachments, setAttachments] = useState(announcement.attachments);

  useEffect(() => {
    if (!isEqual(attachments, announcement.attachments)) {
      setAttachments(announcement.attachments);
    }
  }, [announcement.attachments, attachments]);

  return attachments;
};

// 在组件中使用
export const AttachmentsTab = () => {
  const attachments = useDeepAnnouncementAttachments();
  const { announcement } = useAnnouncement();

  const noAttachments =
    !attachments?.carrier &&
    !attachments?.shipper;

  return (
    // 组件原有内容
  );
};

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