使用React Context API开发亚马逊克隆购物车时出现对象无法作为React子元素报错

报错根因 #

你的错误出在stateProvider.js文件中：你错误导入了React内置的Children工具对象，并直接将该对象作为子元素渲染，React不支持直接渲染对象，因此抛出了对应的错误（你报错中提到的包含map、forEach、count等属性的对象正是React的Children工具对象本身）。

修复步骤 #

1. 修正stateProvider.js代码 #

删除无用的Children导入，同时将渲染的大写Children改为props传入的小写children（也就是你套在StateProvider内部的<App/>组件），修改后完整代码如下：

import React, { createContext, useContext, useReducer } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

2. 后续补充reducer逻辑（可选，不影响当前报错修复） #

你当前的reducer.js中ADD_TO__BASKET和REMOVE_FROM_BASKET两个分支只有break没有返回新状态，后续实现购物车加减逻辑时需要补全每个分支的返回值，示例参考：

function reducer(state, action) {
  switch (action.type) {
    case "ADD_TO__BASKET":
      return {
        ...state,
        basket: [...state.basket, action.payload]
      };
    case "REMOVE_FROM_BASKET":
      return {
        ...state,
        basket: state.basket.filter(item => item.id !== action.payload.id)
      };
    default:
      return state;
  }
}

完成第一步修改后你的报错就会完全消失。

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