如何从嵌套对象数组中提取cows数组的tag字段？

我想要提取JSON数据中cows数组内对象的tag值，但对嵌套数据不太熟悉，尝试编写的React代码未能正常运行（Cow组件仅在p标签中渲染tag值），恳请提供相关建议。

附上我的JSON数据：

[
{
"id": 5,
"email": "vinnywebdev@gmail.com",
"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": "test@test.com",
"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": "vinny@test.com",
"created_at": "2023-11-11T15:02:16.193Z",
"updated_at": "2023-11-11T15:02:16.193Z",
"cows": []
}
]

我编写的代码：

const ViewHerd = () => {

    const [herd, setHerd] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const response = await axios.get('http://localhost:3000/', {
                headers: { Accept: 'application/json' }
            });
            console.log(response.data)
            setHerd(response.data)
        }
        fetchData();

    }, []);

    return (
        <div>
            <h1>Herd</h1>
            {
                herd.map((item) => {
                    return (
                        item.cows.map((sub) => {
                            <Cow tag={sub.tag}></Cow>
                        })
                    )
                })
            }
        </div >
    )
}

export default ViewHerd

你的代码有两个核心问题：

1. 内层map未返回元素：在item.cows.map的回调中，你声明了<Cow>组件但没有返回它，React无法识别并渲染该组件。
2. 缺少唯一key属性：React列表渲染要求每个元素必须有唯一的key，用于追踪元素变化，避免性能问题和控制台警告。

修正后的代码如下：

const ViewHerd = () => {
    const [herd, setHerd] = useState([]);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await axios.get('http://localhost:3000/', {
                    headers: { Accept: 'application/json' }
                });
                setHerd(response.data);
            } catch (error) {
                console.error('获取数据失败:', error);
            }
        }
        fetchData();
    }, []);

    return (
        <div>
            <h1>Herd</h1>
            {
                herd.flatMap((user) => 
                    user.cows.map((cow) => (
                        <Cow key={cow.id} tag={cow.tag} />
                    ))
                )
            }
        </div>
    );
}

export default ViewHerd;

额外优化说明：

• 使用flatMap替代嵌套map，直接将嵌套数组展平为一维数组，代码更简洁。
• 添加try/catch捕获请求错误，避免网络问题导致页面崩溃。
• 用cow.id作为key，保证每个元素的唯一性。

内容的提问来源于stack exchange，提问作者vinnyWebDev