将数据从对象发送到 React 组件

Posted 2023-02-22

【中文标题】将数据从对象发送到 React 组件

【英文标题】：Send data from an Object to a React Component

【发布时间】：2019-10-29 07:57:07

【问题描述】：

访问对象内部的数据以将其发送到 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>
                        );
)

谢谢你能帮助我，如果你需要更多信息，请告诉我

【参考方案1】：

获取对象的值。

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

【参考方案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>

【讨论】：

这是同样的解决方案 Junius L 并且它不起作用.. 谢谢你的帮助，如果你想看看，FurkanO 已经解决了我的问题！

没问题，虽然更新了。我仍然会注意到传播对象会删除不需要的道具。