React使用Context API传递变量失败，ProductConsumer告警且变量为undefined

1. 修复isAuthToCreateGym返回undefined问题 #

第一步：确保上层组件已包裹ProductProvider #

Context生效的前提是消费组件的上层存在对应Provider，你需要在应用根组件（如App.js）中包裹所有需要消费该Context的组件：

import { ProductProvider } from './context'
import Navbar from './navbar'

function App() {
  return (
    <ProductProvider>
      <Navbar />
      {/* 其他业务组件 */}
    </ProductProvider>
  )
}

第二步：修正Navbar中Consumer的使用逻辑 #

你当前直接返回了context的value对象，没有调用isAuthToCreateGym方法，参考以下代码修改：

<ProductConsumer>
  {value => {
    // 解构拿到context里的方法
    const { isAuthToCreateGym } = value
    // 调用方法获取鉴权结果
    const canCreateGym = isAuthToCreateGym()
    console.log("鉴权结果：", canCreateGym)
    // 这里返回导航栏实际要渲染的内容
    return (
      <div className="navbar">
        {canCreateGym && <button>创建场馆</button>}
        {/* 其他导航栏元素 */}
      </div>
    )
  }}
</ProductConsumer>

第三步：修正context.js的小语法问题 #

你当前context.js中{this.props.children};后面的分号会被当作文本渲染到页面，删除多余分号即可：

render() {
  return (
    <ProductContext.Provider
      value={{
        isAuthToCreateGym: this.isAuthToCreateGym
      }}
    >
      {this.props.children}
    </ProductContext.Provider>
  )
}

2. 修复ProductConsumer定义后未使用告警 #

检查两个配置点即可：

• 确认navbar.js顶部已经正确导入Consumer：import { ProductConsumer } from './context'，未导入的话ESLint会判定context.js导出的变量未被使用
• 确认导出、导入的变量名大小写完全匹配，不存在拼写错误

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