如何将对象存入React Context API？解决渲染报错问题

错误原因分析 #

这个错误是因为把JavaScript对象直接当作React子元素渲染，错误提示里的"object with keys {}"说明空对象被误渲染。结合你的代码，核心问题有两个：

1. 组件与Hook命名冲突 #

在ProductsContext.jsx里，你导出了一个名为Products的函数用于获取Context值，但你的页面组件也叫Products（Products.jsx）。如果导入时混淆了两者，就会把Context返回的对象（包含contextProducts和setProducts的对象）当作React组件渲染，直接触发错误。

2. 初始状态与判断逻辑错误 #

• contextProducts初始状态为undefined，后续判断contextProducts.length ===0不成立——对象没有length属性，空对象的length是undefined，永远不等于0。
• 若你在return的省略部分（...）里有直接渲染{contextProducts}的代码，也会触发该错误。

修复步骤 #

步骤1：修改Context自定义Hook名称 #

把ProductsContext.jsx里的自定义Hook改名，遵循React Hook命名规范（以use开头），避免和页面组件冲突：

import { createContext, useContext, useState } from "react";

export const ProductsContext = createContext(null);

// 改名成useProducts，避免命名冲突
export const useProducts = () => {
    return useContext(ProductsContext)
}
  
export const ProductsProvider = ({children}) => {
    // 初始状态设为空对象，避免undefined带来的判断问题
    const [contextProducts, setProducts] = useState({})
    
    const contextValue = { contextProducts, setProducts};

    return (
      <ProductsContext.Provider value={contextValue} displayName="Products Context"> 
        {children}
      </ProductsContext.Provider>
    )
}

步骤2：修正页面组件的判断逻辑 #

在Products.jsx里，修改useEffect的判断条件，正确检查对象是否为空：

import { useEffect } from 'react';
// 导入改名后的useProducts
import { useProducts } from '../../contextAPI/ProductsContext';
import { GETProductsListByCat } from "../../src/server/api"

function Products() {
    // 使用改名后的Hook获取Context值
    const { contextProducts, setProducts } = useProducts();
    
    useEffect(() => {
        // 通过Object.keys获取对象键的数组，判断长度来检查是否为空
        if (Object.keys(contextProducts).length === 0) {
            async function fetchData() {
                try {
                    const productList = await GETProductsListByCat("cate");
                    setProducts(productList);
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            }
            fetchData();
        }
    }, []);


    return (
        <>
            {/* 确保没有直接渲染contextProducts对象，只渲染其属性或遍历生成的元素 */}
            {Object.keys(contextProducts).map((cookieId) => (
                <a href={`cookies/${cookieId}`} className='product-container' key={cookieId}>
                    <img src="products/01/thumbnail.jpg" alt="product" className='product-thumbnail'></img>
                    <div className='label'> {contextProducts[cookieId].name}</div>
                    <div className='label'>${contextProducts[cookieId].price}/100g</div>
                </a>
            ))}
        </>
    );
}

export default Products;

步骤3：检查渲染代码 #

确认所有渲染部分都没有直接输出{contextProducts}，只能渲染对象内的具体属性（如contextProducts[cookieId].name），或通过Object.keys/Object.values遍历生成元素。

额外提示 #

• React Hook必须以use开头，这既是规范，也能有效避免和组件重名的问题。
• 处理对象类型的状态时，不要用length判断是否为空，要用Object.keys(obj).length === 0或Object.values(obj).length ===0。

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