Отправка данных из объекта в компонент React - PullRequest
Новая
       22

Отправка данных из объекта в компонент React

1 голос
/ 14 июня 2019

Доступ к данным внутри объекта для отправки его в React Component

Я пытаюсь восстановить данные внутри объекта, который выглядит следующим образом: 

{89: {…}, 91: {…}, 92: {…}}

89: {name: "Confiture de Myrtilles", product_id: "737", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

91: {name: "Poires Guyot (bio)", product_id: "690", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

92: {name: "Pommes Pinova (bio)", product_id: "700", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

Я хочу работатьна каждый «индекс» (89,91, ....) и отправляйте их по одному в мой компонент React.

Так, например, первое, что будет использовать мой компонент React, будет

{name: "Confiture de Myrtilles", product_id: "737", _wc_review_count: "0", _wc_rating_count: "a: 0: {}", _wc_average_rating: "0",…}

Я пытался использовать функцию карты, как это, но она не работает: 


{this.state.Products.map((product, i) => {
                        return (
                            <div>
                            <Product product_data={product}/>
                            </div>
                        );
})}

Спасибо, если вы можете мне помочь и скажите, если вам нужна дополнительная информация

Ответы [ 2 ]

3 голосов
/ 14 июня 2019

Возьмите значения объекта. 

{
  Object.values(this.state.Products).map((product, i) => {
    return (
      <div>
        <Product product_data={product}/>
      </div>
    );
  })
}
0 голосов
/ 14 июня 2019

У вас есть объект, а не массив.

Создайте массив из объекта: 

const products = Object.values(this.state.products);

Цикл по продуктам: 

products.map(item => <Product product_data={item}/>)

Дайте мне знать, как выполучить.

——

IMO: Я бы распространил данные, затем в компоненте доступ к каждому имени в <Product />.

Пример: 

products.map(item => <Product {...item} />)

Тогда в вашем компоненте <Product />: 

<h1>{this.props.name}</h1>
...