React报错：Objects are not valid as a React child 数据渲染求助

已遭遇该问题两天，无法正确渲染获取到的数据。检测得知schemes是对象类型，使用Object.keys方法后仍出现相同错误。数据结构中paymentData为数组，条目数量不固定，以下是相关代码文件及数据结构说明，请求解决方法。

schemeAPIslice 文件 #

export const schemeApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getSchemeOfUser: builder.query({
            query: () => ({
                url: `${SCHEME_API_URL}`,
                method: "GET",
                credentials: "include",
            }),
            keepUnusedDataFor: 5,
            providesTags: ["Schemes"],
        }),
        createScheme: builder.mutation({
            query: (data) => ({
                url: `${SCHEME_API_URL}/scheme_started`,
                method: "POST",
                body: data,
                credentials: "include",
            }),
            invalidatesTags: ["Schemes"],
        }),
    }),
});

export const { useGetSchemeOfUserQuery, useCreateSchemeMutation } = schemeApiSlice;

Dashboard.js #

const { data } = useGetSchemeOfUserQuery();
<div className='container'>
                <SchemeData schemes={data?.schemes} />
            </div>

SchemeData 组件 #

const SchemeData = ({ schemes }) => {
    console.log(schemes);
    console.log(typeof schemes);

    console.log(typeof JSON.stringify(schemes));

    return (
        <div>
            <h5>Scheme List</h5>
            <ul>
                {Object.keys(schemes).map((item, i) => (
                    <li className='py-5' key={i}>
                        <span>{schemes[item]}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
};

数据结构说明 #

返回的data对象中，schemes是嵌套对象，每个键对应一个方案条目，条目内包含paymentData（数组类型，元素数量不固定）等属性，结构大致如下：

{
  schemes: {
    "scheme_id_1": {
      id: "scheme_id_1",
      name: "xxx",
      paymentData: [/* 数组元素 */],
      // 其他属性
    },
    "scheme_id_2": {
      id: "scheme_id_2",
      name: "yyy",
      paymentData: [/* 数组元素 */],
      // 其他属性
    }
  }
}

1. 处理数据未加载的边界情况 #

组件初始化时，接口请求还未完成，data?.schemes会是undefined，直接调用Object.keys会触发错误，需先做判断：

const SchemeData = ({ schemes }) => {
    // 数据未加载时显示加载提示
    if (!schemes) return <div>加载中...</div>;

    return (
        <div>
            <h5>Scheme List</h5>
            <ul>
                {Object.keys(schemes).map((schemeKey) => (
                    <li className='py-5' key={schemeKey}>
                        {/* 渲染方案具体属性，比如名称 */}
                        <h6>{schemes[schemeKey].name}</h6>
                        {/* 遍历渲染paymentData数组 */}
                        <div className="mt-2">
                            <p>支付记录：</p>
                            <ul>
                                {schemes[schemeKey].paymentData.map((payment, idx) => (
                                    <li key={idx}>{payment.amount} - {payment.date}</li>
                                ))}
                            </ul>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
};

2. 避免直接渲染对象 #

原代码中{schemes[item]}直接输出整个对象，React无法解析会报错，必须渲染对象的具体属性（如name、id），或对嵌套数组做遍历渲染。

3. 优化列表key的使用 #

不要用数组索引i作为key，改用方案的唯一标识（如schemeKey或schemes[schemeKey].id），避免列表更新时出现渲染异常。

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