Typescript React 在 object 中找不到属性

Question

抱歉，标题令人困惑，但我不知道如何更好地命名它。

我正在从食物中获取一些数据 api 并将其存储到状态中。

  const [data, setData] = useState<null | {}>(null);

上面的有状态变量被初始化为 null，然后 稍后在获取完成后变为 object setData(apiData)，其中有一个属性叫做 meals这是 objects

的数组

我正在尝试将获取的数据传递给名为 Card 的组件，但我收到此 错误： " 属性 'meals' 在类型 '{}' 上不存在 "

  data !== null && <Card data={data?.meals} />

我认为它可能无法识别 object 上的属性 'meals' 因为当它试图访问它时数据没有完成提取所以我决定检查是否数据不等于 null 但这也不起作用...

知道我做错了什么吗？我是打字稿的新手。提前谢谢你。

Answer 1

类型{}表示“没有属性的对象”。因此，您是说它不会有 meals 属性，也不会有任何其他。您需要提供与数据外观相匹配的类型。我不知道那个类型到底是什么样子，所以你需要填写它的属性，但是我编写的一些属性的例子是：

interface Meal {
  mealId: string;
  calories: number;
}

interface Data {
  id: string;
  meals: Meal[];
}

// ... used like:
const [data, setData] = useState<null | Data>(null);

// ... and:
data !== null && <Card data={data.meals} />

Typescript React 在 object 中找不到属性

Typescript React cant find property inside object

typescript

reactjs

typescript-typings

Typescript React 在 object 中找不到 属性

Typescript React cant find property inside object

typescript

reactjs

typescript-typings

Typescript React 在 object 中找不到属性