React Context API中StateProvider包裹App组件后页面白屏问题

问题1：StateProvider组件子元素属性拼写错误 #

你在StateProvider.js中定义组件参数时，将标准props属性children错误拼写为childern，导致传入的App组件没有被渲染，这是页面空白的直接原因。

修复后的StateProvider.js代码：

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分支逻辑缺失返回值 #

当前你定义的ADD_TO_BASKET、REMOVE_FROM_BASKET两个case只有break语句，没有返回新的state对象，后续触发这两个action时会导致state变为undefined，引发渲染异常。

可参考以下逻辑补全reducer：

export const initialState = {
  basket: [],
};

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;
  }
}

export default reducer;

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