React报错Invalid prop `class` supplied to React.Fragment排查求助

问题修复方案 #

核心错误触发原因 #

你代码中最大的问题是直接将组件对象作为内容渲染，没有使用JSX标签包裹：
代码里{loading === true ? GrowingSpinner : Body}的写法，相当于把GrowingSpinner这个函数/组件对象直接交给React渲染，触发经典的Objects are not valid as a React child报错，也是你截图中错误的直接来源。

其余需要修正的问题 #

• 重复导入且存在拼写错误的编辑器依赖：你同时导入了拼写错误的BallonEditor和正确的BalloonEditor，属于冗余无效导入，直接删除拼写错误的导入行即可。
• useEffect未添加依赖数组引发无限重渲染：当前无依赖数组的useEffect会在每次组件渲染时都执行，不停触发dispatch修改状态导致组件无限重渲染，需要补充依赖数组控制执行时机。
• CKEditor的disabled属性传入类型错误：你传入的是字符串"true"，该组件要求传入布尔值，需修改为disabled={true}避免类型校验报错。
• 深层属性访问未做非空防护：postDetail还在加载状态时，直接访问postDetail.category.categoryName、postDetail.creator.name等深层属性会抛出空指针错误，建议添加可选链写法做兼容。

核心代码修正示例 #

// 修正useEffect，添加依赖数组
useEffect(() => {
  dispatch({
    type: POST_DETAIL_LOADING_REQUEST,
    payload: req.match.params.id,
  });
  dispatch({
    type: USER_LOADING_REQUEST,
    payload: localStorage.getItem("token"),
  });
}, [dispatch, req.match.params.id]);

// 修正组件渲染逻辑，给GrowingSpinner添加JSX标签
return (
  <div>
    <Helmet title={`Post | ${title}`} />
    {loading === true ? <GrowingSpinner /> : Body}
  </div>
);

// 修正CKEditor属性类型
<CKEditor
  editor={BalloonEditor}
  data={postDetail.contents}
  config={editorConfiguration}
  disabled={true}
/>

内容的提问来源于stack exchange，提问作者Hi-wolfy