提问人：vinnyWebDev 提问时间：11/13/2023 最后编辑：marc_svinnyWebDev 更新时间：11/14/2023 访问量：38
映射嵌套在对象数组中的对象数组
Mapping an array of objects nested in array of objects
问：
如果我在这里遗漏了一些基本的东西，我深表歉意。这是我的 JSON，我想从“cows”数组中的对象中提取“tag”值。我对嵌套数据不是很熟悉，并且已经坚持了一段时间。我将不胜感激任何建议。谢谢！
[
{
"id": 5,
"email": "[email protected]",
"created_at": "2023-11-11T12:38:05.829Z",
"updated_at": "2023-11-11T12:38:05.829Z",
"cows": [
{
"id": 1,
"tag": 34444,
"dob": "2023-11-09",
"breed": "CHX",
"dam": 34563,
"docility": 2,
"agression": 2,
"fertility": 3,
"calving": 5,
"milk": 3,
"calf": 2,
"user_id": 5,
"created_at": "2023-11-11T13:48:48.743Z",
"updated_at": "2023-11-11T13:48:48.743Z"
},
{
"id": 2,
"tag": 12345,
"dob": "2023-11-01",
"breed": "CHX",
"dam": 23412,
"docility": 1,
"agression": 2,
"fertility": 2,
"calving": 3,
"milk": 1,
"calf": 3,
"user_id": 5,
"created_at": "2023-11-11T13:54:42.178Z",
"updated_at": "2023-11-11T13:54:42.178Z"
}
]
},
{
"id": 6,
"email": "[email protected]",
"created_at": "2023-11-11T13:21:01.869Z",
"updated_at": "2023-11-11T13:21:01.869Z",
"cows": [
{
"id": 3,
"tag": 34444,
"dob": "2023-11-01",
"breed": "CHX",
"dam": 12341,
"docility": 1,
"agression": 3,
"fertility": 3,
"calving": 1,
"milk": 3,
"calf": 1,
"user_id": 6,
"created_at": "2023-11-11T13:59:11.224Z",
"updated_at": "2023-11-11T13:59:11.224Z"
}
]
},
{
"id": 7,
"email": "[email protected]",
"created_at": "2023-11-11T15:02:16.193Z",
"updated_at": "2023-11-11T15:02:16.193Z",
"cows": []
}
]
这是我想出的，但不幸的是它不起作用。Cow 组件只是在 p 标签中呈现标签值。
const ViewHerd = () => {
const [herd, setHerd] = useState([]);
useEffect(() => {
async function fetchData() {
// You can await here
const response = await axios.get('http://localhost:3000/', {
headers: { Accept: 'application/json' }
});
console.log(response.data)
setHerd(response.data)
}
fetchData();
}, []); // Or [] if effect doesn't need props or state
return (
<div>
<h1>Herd</h1>
{
//iterate over outer array
herd.map((item) => {
return (
//iterate over inner array
item.cows.map((sub) => {
<Cow tag={sub.tag}></Cow>
})
)
})
}
</div >
)
}
export default ViewHerd
答：
2赞
Yan Tavares
11/13/2023
#1
主要问题是您正在遍历使用但不返回任何值。若要获取所需的行为，组件的 return 语句应如下所示items.cowsmap
return (
<div>
<h1>Herd</h1>
{herd.map((item) =>
item.cows.map((sub) => {
return <Cow key={sub.id} tag={sub.tag}></Cow>; // Adding return statement
})
)}
</div>
);
或
return (
<div>
<h1>Herd</h1>
{
herd.map((item) =>
item.cows.map((sub) => (
<Cow key={sub.id} tag={sub.tag}></Cow> // implicit return (no brackets)
))
)
}
</div>
);
另外，请注意，我为每个渲染添加了一个独特的道具。在 React 中，在渲染列表时，每个子项都应该有一个唯一的键。否则，控制台上将显示一个大红色警告。如果这能解决您的问题，请告诉我！干杯！keyCow
评论
1赞
vinnyWebDev
11/13/2023
谢谢！我应该注意到这一点。非常感谢。
0赞
Yan Tavares
11/13/2023
@vinnyWebDev没问题！这解决了你的整个问题吗？如果是这样，您应该通过单击绿色复选标记来关闭问题来接受答案
评论