React+Strapi项目中Context传参后map读取undefined错误排查

1. 修正Context的初始状态 #

Context的初始值如果没设置正确，会导致组件挂载时categories为undefined或null，即使加了可选链也可能因为根本没有data属性出问题。确保初始状态是包含data属性的对象，且data是空数组：

// 创建Context时的代码
import { createContext } from 'react';

const AppContext = createContext({
  categories: { data: [] },
  products: { data: [] },
  setCategories: () => {},
  setProducts: () => {}
});

2. 规范接口请求后的状态更新 #

调用Strapi接口时，要确认返回的数据结构，同时处理请求失败的情况，避免状态被设置为undefined或错误格式：

// Home组件中获取数据的逻辑
import { useContext, useEffect } from 'react';
import { AppContext } from './AppContext';

function Home() {
  const { setCategories } = useContext(AppContext);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await fetch('/api/categories');
        const result = await response.json();
        // 若Strapi返回的直接是数组，手动包装成{ data: ... }结构
        setCategories({ data: result });
      } catch (error) {
        console.error('分类数据获取失败:', error);
        // 失败时兜底设置空数组，避免状态异常
        setCategories({ data: [] });
      }
    };

    fetchCategories();
  }, [setCategories]);

  return <div>Home</div>;
}

3. 确认组件的状态接收逻辑 #

• 如果是通过props传递categories，检查Home组件是否正确传递：

  // Home组件中渲染Category
  <Category categories={categories} />
  

• 如果是通过Context消费，确保Category组件正确使用useContext：

  // Category组件中
  import { useContext } from 'react';
  import { AppContext } from './AppContext';
  
  function Category() {
    const { categories } = useContext(AppContext);
    // ...
  }
  

4. 增强渲染时的兜底处理 #

在遍历前给data加空数组兜底，确保map始终有可遍历的数组：

// Category组件中的渲染逻辑
{(categories?.data || []).map(category => (
  <div key={category.id} className="category-item">
    {category.attributes.name}
  </div>
))}

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