如何使用三元运算修改<td>内字段值 解决isShared为false仍返回shared问题

问题修复方案 #

核心问题定位 #

你当前的逻辑出现全返回shared的情况，90%以上的概率是以下两类原因导致的，按优先级排查即可： #

1. 全局Store的isShared取值异常 #

你代码里的isShared是从localStorage关联的Store取的，而localStorage存储的所有值都是字符串类型，如果你存的时候直接存了布尔值false，取出来会变成字符串"false"，做判断的时候Boolean("false")会返回true，就会导致你以为isShared是false，实际逻辑判断时当成true处理。

修复方法：

修改getLocalStorageStore里isShared的取值逻辑，做显式布尔转换：

// 示例转换，对应你实际存储的key调整即可
const store = getLocalStorageStore()
return {
  ...store,
  // 只有存的是字符串"true"的时候才返回布尔true，其他情况都是false
  isShared: store.isShared === 'true'
}

可以加一行打印确认取值是否符合预期：

const { email = "", isShared = false } = useSelector(getLocalStorageStore);
// 加这行看控制台输出，确认类型和值
console.log('isShared值:', isShared, '类型:', typeof isShared)
const isUserA = email.toLowerCase().includes("usera");

2. isShared是单文件属性而非全局属性 #

如果你的需求里，共享状态是每个文件单独的属性，不是全局统一的，那你现在从全局Store取isShared的逻辑本身就是错的，所有文件都会跟着同一个全局状态走，自然会出现全部显示shared的情况。

修复方法：

首先更新类型定义，把isShared加到文件属性里：

export interface FileResultType {
  results: string;
  filename: string;
  status: string;
  // 新增单文件的共享状态字段
  isShared: boolean;
}

然后调整组件逻辑，从props取单文件的isShared：

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

const FileResults: React.FC<FileResultType> = props => {
  const { results, filename, status = "shared", isShared } = props;
  const { email = "" } = useSelector(getLocalStorageStore);
  const isUserA = email.toLowerCase().includes("usera");

  return (
    <tr className="file-result">
      <td>{results || "--"}</td>
      <td>{filename || "--"}</td>
      <td>{isUserA && isShared ? status : "private"}</td>
    </tr>
  );
};

export default FileResults;

额外优化点 #

你的组件返回值里包了多余的React碎片<>，直接返回tr标签即可，没有必要多套一层。

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