时间戳

首页 > 解决方案 > 上下文 API 消费者值未定义

reactjs - 上下文 API 消费者值未定义

问题描述

我有一个孙子组件，从他们的祖父母那里消费。但是，上下文值未定义：

文件1：

export const WTContext = createContext();

export default class A extends Component {

    ...
    render(){
        ...
        const contextValue={state: { items: [] }, actions: { doA: () => {}}}
        return (
            <WTContext.Provider value={contextValue} >
                ...
            </WTContext.Provider>
        }
    }
}

文件2：

export default function B(){
  return (
     <WTContext.Consumer>
        {({state}) => (
          ...
          return (
             <div>
                {state.items.map(...<C/>)} //all good, B use context.
             </div>
             {state.items
          )
        )}
     </WTContext.Consumer>
  )
}

文件3：

export default function C(props){
   return (
       <WTContext.Consumer>
           {({ state, actions }) => {
                // <-- Cannot read property 'state' of undefined
                ...

           }
       </WTContext.Consumer>
   )
}

因此B，呈现多个C组件的映射具有上下文消费者价值undefined。导入是有效的，但我无法弄清楚为什么提供者传递的值undefined位于第二级嵌套（因为第一级看起来不错，B它确实按要求使用上下文）。

标签： reactjs

解决方案

更新：

显然这是一个第 3 方的问题。我使用了 google-map-react 库，并注意到他们删除了对使用 React 版本 < 15 的用户的 Context API 的支持，并在下一个主要版本中发布了修复。

推荐阅读