Question

我使用上下文api将数据正确传递给了使用者，但是产品组件不会显示。

产品列表组件：

| id | genre    |
|----|----------|
| 12 | action   | 
| 13 | thriller | 
| 14 | horror   |

我向其中发送了具有消费者价值的数据的产品组件：

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;

谢谢。

Answer 1

您不会从Consumer内部返回映射数据，这就是为什么您的产品组件无法呈现的原因。在映射的数据中添加一个return关键字，它将正常运行

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

Answer 2

您不会从作为子代给定的函数返回任何内容给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>
    );
  }
}

组件未使用使用者显示

2 个答案: