Can't print a dict: Uncaught TypeError: Cannot read properties of undefined

Question

我有这个错误：

crew.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'first')

来自 API（我正在使用 FastAPI 作为后端）我有这个 return:

{"id":"1","name":{"first":"Sponge","last":"Bob"},"role":"Captain","active":true}

当使用像这样的代码通过 REACT 在屏幕上打印时

const allcrew = crewList.map((index)=>
    <li key={index.id}>{index.name.first} {index.name.last} <br /> <i>{index.role}</i></li>
);

我的 model.py 文件中的“first”似乎未定义

from pydantic import BaseModel

class CrewName(BaseModel):
  first: str
  last: str

class Crew(BaseModel):
id: str
name: list [CrewName] = []
role: str
active: bool

有人能理解这个问题吗？在将 var "name" 用作 dict 之前，但就像 str 一样，一切正常。

谢谢！

Answer 1

你在不合适的情况下使用地图功能。实际上，map() 方法创建了一个新数组，其中包含对调用数组的每个元素调用给定函数的结果。现在，您直接使用crewList的所有结果，而不是一一使用。

像你一样使用 map，在第一次通过 map 时，index 匹配 "id": "1" 所以它不知道 name.first 因为它是 undefined。 map 分别处理每个元素。

所以不用map方法就可以直接访问元素

const allcrew = <li key={crewList.id}>{crewList.name.first} {crewList.name.last} <br /> <i>{crewList.role}</i></li>
);

但是，如果稍后您想要创建多个 li 元素，此时您可以使用 map 方法和您想要迭代的一组船员。例如：

const crewList = [
    {"id":"1","name":"first":"Sponge","last":"Bob"},"role":"Captain","active":true},
    {"id":"2","name":"first":"Iron","last":"Man"},"role":"Superhero","active":true}
]

const allcrew = crewList.map((index)=>
    <li key={index.id}>{index.name.first} {index.name.last} <br /> <i>{index.role}</i></li>
);

Can't print a dict: Uncaught TypeError: Cannot read properties of undefined

Can't print a dict: Uncaught TypeError: Cannot read properties of undefined

python

reactjs

fastapi