javascript - 组件不使用消费者显示

Question

我使用 context api 正确地将数据传递给消费者， 但是产品组件不显示。

产品组件列表:

import React, { Component } from "react";
import Product from "./product";
import { Consumer } from "./context";

class Listofproducts extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  render() {
    return (
      <Consumer>
        {value => {
          value.map(data => {
            console.log(data); // its returning the data correctly
            return <Product key={data.id} product={data} />;
          });
        }}
      </Consumer>
    );
  }
}

export default Listofproducts;

我发送带有消费者值的数据的产品组件:

import React, { Component } from "react";

class Product extends Component {
  render() {
    console.log(this.props.product); // not showing anything on the console nor an error
    return <div>hello from product</div>;
  }
}

export default Product;

提前谢谢您。

Answer 1

您没有从 Consumer 中返回映射数据，这就是您的 Product 组件未渲染的原因。在映射数据中添加 return 关键字即可正常工作

<Consumer>
    {value => {
      return value.map(data => {
        console.log(data); 
        return <Product key={data.id} product={data} />;
      });
    }}
  </Consumer>