React useState存储Firebase对象数组渲染报子元素无效错误

你触发的Error: Objects are not valid as a React child错误和状态更新失败问题，来自两个代码逻辑错误：

• 非法渲染JS对象：返回的JSX中直接写了<h2>{tasks}</h2>，tasks是存储Firebase返回任务数据的对象数组，React不支持直接将普通JS对象渲染为DOM节点，直接输出对象就会抛出该错误。
• 状态更新逻辑完全错误：
  • 循环内调用状态更新函数时，拿到的tasks始终是effect执行时闭包缓存的初始空数组，逐次更新会生成嵌套的错误结构，根本得不到预期的一维任务数组
  • 组件内定义的var data: Object[] = []是组件每次重渲染都会重置的局部变量，无法持久暂存数据
  • useState返回的setter函数命名错误，命名为getUserTasks和接口请求函数重名，极易引发逻辑混淆

1. 规范useState命名，移除无意义的局部暂存变量，接口返回数据校验格式后一次性存入状态，不需要循环逐次push
2. 渲染任务列表时遍历状态数组，输出每个任务对象里的字符串、数字等基础类型字段，禁止直接渲染整个对象/对象数组

修复后可直接运行的代码 #

import { useState, useEffect } from 'react';
import { IonContent, IonText, IonItem, IonLabel } from '@ionic/react';
// 保留你项目中原有的getUserTask接口、其他依赖引入

export function ListUserTask() {
    // 修正setter命名，明确状态类型避免类型错误
    const [tasks, setTasks] = useState<Array<{id: string, user: string, [key: string]: any}>>([]);

    useEffect(() => {
        (async () => {
            const rawData = await getUserTask();
            console.log("Firebase返回原始数据", rawData);
            
            // 如果Firebase返回的是键值对结构（key为自动生成的任务ID，value为任务内容，和你截图的结构一致），先转成带id的数组
            let taskList = [];
            if (!Array.isArray(rawData)) {
                taskList = Object.entries(rawData).map(([taskId, taskContent]) => ({
                    id: taskId,
                    ...taskContent as Object
                }));
            } else {
                taskList = rawData;
            }
            
            // 一次性更新所有任务到状态，不需要循环逐次更新
            setTasks(taskList);
        })();
    }, []);

    return (
        <IonContent>
            <IonText color="muted">
                <h2>我的任务列表</h2>
                {/* 遍历数组渲染每个任务项，只渲染对象里的基础类型字段 */}
                <div>
                    {tasks.map((task) => (
                        <IonItem key={task.id}>
                            <IonLabel>
                                {/* 替换成你自己任务对象里的实际字段，比如任务名、截止时间等 */}
                                任务ID：{task.id} | 所属用户：{task.user}
                            </IonLabel>
                        </IonItem>
                    ))}
                </div>
            </IonText>
        </IonContent>
    );
}

export default ListUserTask;

Firebase数据结构参考 #

• React JSX中可直接渲染的只有字符串、数字这类基础类型，布尔值、null、undefined会被忽略，普通对象、Symbol、函数直接渲染都会触发同类报错
• 批量更新状态时不要在循环里反复调用setter拿旧值拼接，拿到完整数据后一次性更新即可，性能更好也不会出现闭包导致的旧值问题

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