时间戳

首页 > 解决方案 > Typescript React无法在对象内找到属性

reactjs - Typescript React无法在对象内找到属性

问题描述

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

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

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

上面的有状态变量被初始化为 null，然后在获取完成后变为一个对象，该对象setData(apiData)具有一个名为餐的属性，它是一个对象数组

我正在尝试将获取的数据传递给名为 Card 的组件，但我收到此错误：“Property 'meals' does not exsist on type '{}'”

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

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

知道我做错了什么吗？我是打字稿的新手。先感谢您。

标签： reactjstypescripttypescript-typings

解决方案

该类型的{}意思是“没有属性的对象”。因此，您是说它没有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} />

推荐阅读