如何解决“不将对象用作类型”的错误？

Question

我不明白这个错误信息引起的。

我的组件有两个和一个包含对象的数据数组。

我收到一条错误消息“不要object用作类型。该object类型目前难以使用'。

我该如何解决？

我附上了数组有对象的数据。

first.tsx...
import { dataList } from './xxx';
   // This dataList === 
export const dataList = [
  {
    id: 1,
    title: "text",
    hidden1: "text",
  },
  {
    id: 2,
    title: "text",
    hidden1: "text",
    hidden2: "text",
  },
  {
    id: 3,
    title: "text",
    hidden1: "text",
    hidden2: "text",
    hidden3: "text",
  },
];

const First = () => {
  return <Second data={dataList} />
}

second.tsx...
const Second = ({data} : { data:object[] } ) => {.    << here, "Don't use 'object' as a type.
  return <ul><li> {data.tag....blah blah} </li><ul>
}

错误信息 ：

Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](https://github.com/microsoft/TypeScript/issues/21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types

Answer 1

您需要明确说明此处被解构的数据的类型。

您可以只创建数据的接口。

编辑：由于您的数据有一些可选参数，我更新了界面以反映这一点。

interface IData {
    id: number;
    title: string;
    hidden1: string;
    hidden2?: string;
    hidden3?: string;
}

然后替换object[]为IData[]. 所以现在你指定 this 接受一个IData接口数组。

const Second = ({ data } : { data:IData[] }) => {
  return <ul><li>{data}</li><ul>
}