React JS - Как создать дочерний компонент динамически на основе ответа Ho C ajax

Question

Я в основном новая пчела в ReactJS районах. Моя цель состоит в том, чтобы сделать вызов ajax из компонента и на основе ответа передать данные ответа как реквизиты дочернему компоненту, которые мне нужно создать динамически на основе родительского вызова ajax. Это может быть через Ho C, но я не совсем уверен в этом.

Структура, для которой я предполагал -

<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

Вы извлекаете данные внутри 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} />);
    }
}

Но вам также нужно выполнить нулевую проверку, что, если в вашем ответе нет мест размещения

Answer 2

Object.keys должен добиться цели в этом случае. Это создаст правильное количество компонентов.

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