React JS - 如何根据 HoC ajax 响应动态创建子组件

Question

我主要是 ReactJS 领域的新手。 我的目的是从组件进行 ajax 调用，并根据响应将响应数据作为道具传递给我需要根据父 ajax 调用动态创建的子组件。 它可以通过 HoC，但我不太确定。

构建我假设的内容 -

<MasterComponent> // Can be a HOC
    <ProductLayout props={data} /> // should be dynamic
</MasterComponent>

因此， MasterComponent将执行 ajax 调用，如果响应具有两个展示位置数据（例如），那么它将创建两个ProductLayout子组件并将数据作为道具传递给它，这些道具从具有第一个和第二个索引的 ajax 响应中获取回复。

来自 ajax 调用的示例响应：

{
  "placements": [
    {
      "pagemap":"pdp",
      "identifier":"list_item_1",
      "title":"You might like also",
      "items":
      [
        {
          "name":"item_name_1",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_2",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_3",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        }
      ]
    },
    {
      "pagemap":"pdp",
      "identifier":"list_item_2",
      "title":"You might like also",
      "items":
      [
        {
          "name":"item_name_1",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_2",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_3",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        }
      ]
    },
    {
      "pagemap":"pdp",
      "identifier":"list_item_3",
      "title":"Discover more",
      "items":
      [
        {
          "name":"item_name_1",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_2",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_3",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        }
      ]
    },
    {
      "pagemap":"pdp",
      "identifier":"list_item_4",
      "title":"Recommendation for you",
      "items":
      [
        {
          "name":"item_name_1",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_2",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        },
        {
          "name":"item_name_3",
          "url":"https://www.company.com/item_name_1",
          "price":"$413"
        }
      ]
    }
  ]
}

Answer 1

在这种情况下，Object.keys 应该可以解决问题。 它将创建正确数量的组件。

 Object.keys(placements).map((data) => { return <ProductLayout data={data} /> })

Answer 2

你在 MasterComponent 里面获取数据对吗？

所以它看起来像这样：

class MasterComponent extends React.Component {
    componentDidMount() {
        // fetch() Your API request
        // this.setState({ data: response });
    }

    render() {
        const { data } = this.state;

        if (!data.placements) return null;
        return data.placements.map((data, index) => <ProductLayout data={data} />);
    }
}

但是您还需要进行空检查，因为如果您的响应中不存在展示位置怎么办