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

Question

抱歉标题混乱，但我不知道如何更好地命名它。

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

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

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

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

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

我认为它可能无法识别对象上的属性“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} />