React报错：无法为对象只读属性'_status'赋值问题求助

你遇到的问题是动态传入懒加载组件到react-bootstrap Modal时触发错误，常规导入正常，错误指向React懒加载处理函数，核心原因集中在Suspense的作用范围、懒加载组件引用稳定性这两点，具体如下：

1. Suspense未包裹实际懒加载组件的渲染位置 #

当前你的代码里，Suspense包裹的是ListModal/FormModal这些Modal容器组件，但这些容器本身并不是懒加载的——真正需要懒加载的是通过props传入到Modal内部的Component。Suspense必须直接包裹正在懒加载的组件才能捕获其加载状态，否则React无法处理懒加载过程中的pending状态，进而抛出错误。

修复方式： #

将Suspense移到Modal容器组件内部，也就是渲染传入的懒加载组件的位置：

// 以ListModal为例，修改内部代码
const ListModal = ({ Component, componentProps, closeModal, ...rest }) => {
  return (
    <Modal show onHide={closeModal}>
      <Modal.Header closeButton>
        <Modal.Title>{rest.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {/* 在这里包裹懒加载组件 */}
        <React.Suspense fallback={<div>加载中...</div>}>
          <Component {...componentProps} />
        </React.Suspense>
      </Modal.Body>
    </Modal>
  );
};

同时移除ModalList中包裹Modal容器的Suspense：

// ModalList中的修改示例
case TYPE_LIST:
  return <ListModal {...props} />;

2. 懒加载组件的引用不稳定 #

如果调用openListModal时，每次都动态创建懒加载组件（比如直接传入React.lazy(() => import(...))），会导致每次传入的Component引用都是新的。React会将其视为不同的组件，频繁销毁重建，甚至触发懒加载逻辑的异常。

修复方式： #

在模块顶部提前定义懒加载组件，确保引用固定：

// 模块顶部定义，引用稳定
const MyLazyListComponent = React.lazy(() => import('./MyLazyListComponent'));

// 调用时传入固定引用
openListModal(MyLazyListComponent, { /* 组件props */ });

3. 潜在的key值问题（非直接原因，但可能加剧异常） #

你当前使用index作为Modal的key，当modalList的顺序变化或增删时，会导致React复用错误的组件实例，可能和懒加载逻辑冲突。建议给每个modalDef添加唯一标识（比如uuid），用该标识作为key：

// 生成modalDef时添加唯一id
const openModal = (Component, componentProps, type) => {
  const modalDef = {
    id: crypto.randomUUID(), // 或其他唯一id生成方式
    Component,
    componentProps,
    type,
    // ...其他属性
  };
  // 添加到modalList
};

// ModalList中使用id作为key
const props = { ...modalDef, key: modalDef.id, closeModal, onConfirmExitChange };

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