React报错'Objects are not valid as a React child'排查求助

1. SingleRecord组件接收props方式错误 #

React函数组件的props是单一对象参数，你现在把firstName和age当成独立参数接收，导致firstName实际是整个props对象，age为undefined。渲染时把对象直接作为React子元素，就触发了"Objects are not valid as a React child"错误。

修改SingleRecord.js：

const SingleRecord = ({ firstName, age }) => {    
    return (
    <li className="singe-record">
        {firstName} is {age} years old.
    </li>
    );
}

export default SingleRecord;

2. Display组件的状态初始化与数据处理优化 #

• 初始状态useState()应设为空数组useState([])，避免初始值为undefined的潜在问题。
• 手动循环构建dataArray的方式冗余，直接用数组map方法转换数据更简洁。
• 错误处理逻辑要前置：先判断请求是否成功，再解析数据，避免请求失败时处理null数据报错。
• 列表项必须添加唯一key，帮助React识别元素变化，提升渲染性能。

修改Display.js：

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

function Display() {
    // 初始化状态为空数组
    const [records, setRecords] = useState([]);

    const fetchRecords = () => {
        fetch('http://localhost:3001/users')
        .then(async response => {
            // 先判断请求是否成功
            if (!response.ok) {
                const error = await response.text() || response.status;
                return Promise.reject(error);
            }
            
            const isJson = await response.headers.get('content-type')?.includes('application/json');           
            const data = isJson ? await response.json() : [];

            // 用map直接转换数据，替代循环push
            const dataArray = data.map(elem => ({
                _id: elem._id, 
                firstName: elem.firstName,
                age: elem.age
            }));
            
            setRecords(dataArray);
        })
        .catch(error => {
            console.error('There was an error!', error);
        });
    }

    useEffect(() => {  
        fetchRecords();
    }, []);

    // 空状态提示，替代返回null
    if (records.length === 0) {
        return <div>Loading...</div>;
    }

    return (
        <div className="records-display">
            <h2>Records:</h2>
            <ul className ="records-list">
                {records.map(elem => (
                    <li key={elem._id}>
                        <SingleRecord firstName={elem.firstName} age={elem.age} />
                    </li>
                ))}
            </ul>      
        </div>
    );
}

export default Display;

3. 后端数据校验 #

确认MongoDB返回的firstName和age是字符串/数字等基础类型，而非嵌套对象——如果字段是对象类型，也会触发相同的渲染错误。可以在后端打印返回数据结构排查：

app.get('/users', async (req, res) => {
    const cursor = await records.find();  
    const results = await cursor.toArray();
    console.log('返回数据:', results); // 检查firstName和age的类型
    res.send(results);         
})

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