React使用Context传值时ProductsList组件无法获取context.js数据如何解决

问题原因 #

1. 你定义的ProductProvider组件中，ProductContext.Provider没有渲染传入的子元素，所有被Provider包裹的组件都不会被渲染，自然无法获取context值
2. 你需要确保使用ProductConsumer的ProductsList组件，被ProductProvider组件包裹在内部层级中

修复方案 #

第一步：修改context.js中的ProductProvider渲染逻辑 #

在Provider标签内部添加{this.props.children}渲染子组件：

class ProductProvider extends React.Component {
    state = {
        products: storeProducts,
        detailProduct: detailProduct
    };
    handleDetail = () => {
        console.log("hello products");
    };
    addToCart = () => {
        console.log("hello details");
    };
    render() {
        return (
            <ProductContext.Provider 
                value={{
                    ...this.state,
                    handleDetail: this.handleDetail,
                    addToCart: this.addToCart
                }}
            >
                {/* 新增这一行渲染子组件 */}
                {this.props.children}
            </ProductContext.Provider>
        );
    }
}

第二步：在根组件中用ProductProvider包裹业务组件 #

比如在App.js中添加如下逻辑，把ProductsList放在Provider内部：

import React from 'react';
import { ProductProvider } from './context';
import ProductsList from './ProductsList';

function App() {
  return (
    <ProductProvider>
      {/* 所有需要用到商品context的组件都放在这里 */}
      <ProductsList />
    </ProductProvider>
  );
}

export default App;

修改完成后刷新页面，控制台就能正常打印context的value值。

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