时间戳

首页 > 解决方案 > 组件未使用消费者显示

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

问题描述

我使用上下文 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;

先感谢您。

标签： javascriptreactjs

解决方案

您没有从作为 child 的函数返回任何内容到Consumer.

添加return关键字，它将按预期工作。

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

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

推荐阅读