將數據從Object發送到React Component

Question

訪問對象內的數據以將其發送到React組件

我正在嘗試恢復對象內部的數據，如下所示：

{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>
                        );
})}

謝謝，如果你能幫助我，告訴我你是否需要更多的信息

Answer 1

獲取對象的值。

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

Answer 2

你有一個對象而不是數組。

從對象創建一個數組：

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>