React使用createContext出现Element type is invalid错误如何解决？

• 核心问题是变量命名冲突：你在CartProvider组件内部声明了一个和外层createContext返回的上下文实例完全同名的变量CartContext，受JavaScript块级作用域规则影响，组件内部的局部变量会覆盖外层的上下文实例。
• 你在组件内部定义的CartContext是普通业务数据对象，不是createContext()生成的Context实例，不存在.Provider属性，渲染<CartContext.Provider>时读取到的值为undefined，直接触发了你遇到的类型错误。

仅需要将组件内部存储业务数据的变量改名即可，避免和外层的Context实例重名，修改后的CartProvider代码如下：

import React, {createContext} from 'react'

export const CartContext =  createContext({});

const CartProvider = (props) => {

  const addItemToCartHandler = item => {};
  const removeItemFromCartHandler = id => {};

  // 修改变量名，避免和外层Context实例重名
  const cartContextValue = {
    items: [],
    totalAmount: 0,
    addItem: addItemToCartHandler,
    removeItem: removeItemFromCartHandler,
  }

  return (
  <CartContext.Provider value = {cartContextValue}>
      {props.children}
  </CartContext.Provider>
  )  
}
    
export default CartProvider;

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