如何为对象创建TypeScript类型并在react-data-table-component中显示对象名称

你的核心问题是类型定义与后端返回数据格式不匹配：你将DataRow中的Users定义为string类型，但后端返回的是一个包含用户对象的数组，导致TypeScript在访问row.Users.name时报错。

步骤1：修正类型定义 #

先定义单个用户的类型结构，再将DataRow中的Users指定为该类型的数组：

// 定义单个用户的类型
type User = {
  name: string;
};

// 修正DataRow类型，匹配后端返回格式
type DataRow = {
  id: number;
  nickname: string;
  Users: User[]; // 改为User类型的数组
};

步骤2：调整列选择器逻辑 #

由于Users是数组，需要根据业务需求处理取值逻辑：

• 若仅需显示第一个用户的名称，可处理空数组避免报错：

const columns: TableColumn<DataRow>[] = [
  {
    name: "ID",
    selector: (row) => row.id,
  },
  {
    name: "nickname",
    selector: (row) => row.nickname,
  },
  {
    name: "name of the user",
    // 取第一个用户的name，数组为空时显示默认文本
    selector: (row) => row.Users[0]?.name || "无关联用户",
  },
];

• 若需显示所有用户名称，可拼接数组元素：

// 替换上述列的selector为：
selector: (row) => row.Users.map(user => user.name).join(', ') || "无关联用户",

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