React应用报'consider adding error boundaries to your tree'错且状态判断失效

问题原因分析 #

1. 应用崩溃的常见诱因 #

• useSelector返回值兜底缺失：如果getLocalStorageStore初始化阶段返回undefined，直接解构{ email = "", isShared = false }会抛出无法读取undefined属性的错误，触发React错误边界提示。
• DOM结构不合法：<tr>标签必须嵌套在<table>、<tbody>标签内使用，直接单独渲染<tr>会触发React DOM层级校验错误，导致应用崩溃。
• 类型定义不匹配：如果FileResultType未定义必填字段的可选属性，传入props缺失时可能触发运行时报错。

2. isShared值不生效的核心原因 #

你当前代码中使用的isShared是从全局本地存储store中读取的全局变量，并非当前文件的独立共享属性，所有文件共用同一个全局isShared值，自然不会随单个文件的属性变化产生不同的返回结果。你的业务逻辑中所需的判断依据应该是单个文件维度的isShared属性，需要从组件props传入。

修复后代码 #

import React from "react";
import { useSelector } from "react-redux";
import { getLocalStorageStore } from "@/store/localStorage/utils";

// 先更新FileResultType类型定义，新增isShared字段
interface FileResultType {
  results?: any;
  filename?: string;
  status?: string;
  isShared?: boolean; // 新增当前文件的共享状态字段
}

const FileResults: React.FC<FileResultType> = props => {
  const { results, filename, status = "shared", isShared: fileIsShared = false } = props;

  // 对store返回值加兜底，避免解构报错
  const localStorageStore = useSelector(getLocalStorageStore) || {};
  const { email = "" } = localStorageStore;
  const isUserA = email.toLowerCase().includes("usera");

  return (
    <tr className="file-result">
      <td>{results || "--"}</td>
      <td>{filename || "--"}</td>
      {/* 用当前文件的isShared做判断 */}
      <td>{isUserA && fileIsShared ? status : "private"}</td>
    </tr>
  );
};

export default FileResults;

额外使用注意事项 #

调用FileResults组件的父组件需要确保外层包裹合法的table结构，示例：

<table>
  <tbody>
    {/* 遍历文件列表传入单个文件的isShared属性 */}
    {fileList.map(file => <FileResults key={file.id} {...file} />)}
  </tbody>
</table>

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