使用ReactJS组织数组中的数据并将其推送到REST API

fkaflof6  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(106)

我想推一些 prop , prop 和产品是相关的,我需要推一个阵列(产品)中的 prop ,而不是推所有分开的 prop 。
在我的HTML中,我有一些 prop ,如果存在的话,我需要推到API:

<div id="app"
    data-product="Premium Pack"
    data-sku="454677-rEqO3"
    data-image="https://2_RB_3183_006_71.jpg"
    data-website="https://website.com/"
></div>

下面是我如何推动 prop :

if( typeof this.props.product !== "undefined" )
    data.push({ key : 'product', value : this.props.product });

if( typeof this.props.sku !== "undefined" )
    data.push({ key : 'sku', value : this.props.sku });

if( typeof this.props.image !== "undefined" )
    data.push({ key : 'image', value : this.props.image });

if( typeof this.props.website !== "undefined" )
    data.push({ key : 'website', value : this.props.website });

我试着像这样重构上面的代码,但是我不知道如何组织数组中的数据:

this.props.string.forEach( string => {
    let value = string.value;
    let name = string.name;

    if( typeof this.props.name !== "undefined" )
        data.push({ key : name, value : value });
});


我已经设法使用for...of循环推送了props,问题是我仍然不能组织products数组中的元素,并且不能排除一些props,这得到了所有的props:

if( typeof this.props.product !== "undefined" ) {
    const obj = this.props;
    for (const [key, value] of Object.entries(obj)) {
        data.push({ key : key, value : value });
    }
}
00jrzges

00jrzges1#

可以尝试使用Object.entries将 prop 转换为[key, value]数组,并将其Map到{key: name, value: value}数组:

const data = Object
.entries(this.props) // will create an array of [key, value] s
.map(([key, value])=> ({key, value})) // will create a array with {key: name, value: value} s

如果你不太明白什么是Object.entriesarray.map,你可以看看这些方法的文档:

相关问题