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

Question

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

结构我的假设——

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

因此，MasterComponent将执行 ajax 调用，如果响应具有两个放置数据(例如(，那么它将创建两个ProductLayout子组件，并将数据作为从 ajax 响应中获取的 props 传递到其中，这些 props 从 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} />);
}
}

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