React中传递对象数组作为props时出现undefined问题求助

你的代码存在几个核心问题，直接导致Props获取异常，以下是问题分析和修正方案：

核心问题梳理 #

1. useEffect使用错误：你把组件的JSX返回放在了useEffect的return中——useEffect的return是用于清理副作用的函数，组件的渲染内容必须放在组件的顶层return里。同时useEffect缺少依赖数组，可能引发不必要的重复执行。
2. Props解构错误：给UserTable传递的是data={userList}，但组件里却试图解构{props}，这会导致无法获取正确的数组数据，应该直接解构传递的属性名{data}。
3. 数组处理逻辑错误：userList是对象数组，不能直接从数组本身解构id、userName这类字段，需要遍历数组逐个处理每个用户对象。

修正后的代码 #

User组件（父组件）

import { useState, useEffect } from 'react';
import axios from 'axios';
import UserTable from './UserTable';

function User() {
    const [userList, setUserList] = useState([]);
    const [error, setError] = useState(null);

    const getAllUsers = async () => { 
        try {
            const response = await axios.get(BASE_URL + "/users/all");
            setUserList(response.data);
        } catch (err) {
            setError(err.message);
        }
    };

    useEffect(() => {
        getAllUsers();
    }, []); // 空依赖数组确保数据请求仅执行一次

    // 组件渲染内容放在顶层return中
    return (
        <div>
            {error && <div>获取数据失败：{error}</div>}
            <UserTable data={userList} />
        </div>
    );
}

export default User;

UserTable组件（子组件）

function UserTable({ data }) {
    // 遍历用户数组，逐个渲染表格行
    return (
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                </tr>
            </thead>
            <tbody>
                {data.map(user => (
                    <tr key={user.id}>
                        <td>{user.id}</td>
                        <td>{user.userName}</td>
                        <td>{user.password}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

export default UserTable;

关键注意事项 #

• 组件的JSX必须放在组件的顶层return中，useEffect仅用于处理数据请求、事件监听这类副作用逻辑。
• 子组件接收Props时，要和父组件传递的属性名保持一致（比如这里的data），不能用props作为解构字段。
• 遍历数组渲染元素时，必须给每个元素添加唯一的key属性（通常用数据的唯一ID），避免React渲染警告。

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