Javascript 将数据传递到lodash map（）函数-函数组件

这是我的产品的示例。json

{
  "products": [
    {
      "product_id": 1,
      "product_name": "M-Z-8Nm",
      "supplier_id": 1,
      "product_cat": "Motori",
      "product_subcat": "Zglobni motori",
      "product_char": "8Nm",
      "product_uom": "kom",
      "product_quantity": "20",
      "product_commentar": ""
    },
    {
      "product_id": 2,
      "product_name": "M-P-10Nm",
      "supplier_id": 1,
      "product_cat": "Motori",
      "product_subcat": "Pomoćni motori",
      "product_char": "10Nm",
      "product_uom": "kom",
      "product_quantity": "13",
      "product_commentar": ""
    }
  ]
}

现在，在products.json（

react Select

）下的组件中，我正在映射Select字段的选项并返回它。在本例中，我将

产品名称

映射为选择按钮的选项

我想让这个组件可以重用，这样我就可以用props传递数据并使用它（即

产品id

而不是

产品名称

。props中的数据存储在

const extractProps

中，这是字符串类型（但不需要）

我无法将products

product\u name

中的密钥替换为props

extractProps

中的数据

ReactSelectComponent.js:

import React from "react";
import Select from "react-select";
import FetchDataCustomHook from "./FetchDataCustomHook.js";
import _ from "lodash";

const ReactSelectComponent = (props) => {
    //  extractProps is typeof string and need to replace "product_name"
    const extractProps = props.propsFromForm
    const options = _.map(
        FetchDataCustomHook(),
        function (products) {
            return {label: products.product_name, value: products.product_name}
        });
    return (<Select options={options}/>)
}
export default ReactSelectComponent;

从“React”导入React；
从“反应选择”导入选择；
从“/FetchDataCustomHook.js”导入FetchDataCustomHook；
从“洛达斯”进口；
const ReactSelectComponent=（道具）=>{
//extractProps是字符串类型，需要替换“产品名称”
const extractProps=props.propsFromForm
const options=\u0.map(
FetchDataCustomHook（），
功能（产品）{
返回{label:products.product_name，value:products.product_name}
});
返回（）
}
导出默认组件；

您不需要lodash来完成该映射，这是一个使用纯js的解决方案：

const ReactSelectComponent=（{property}）=>{
const options=products.map（（产品）=>{
返回{value:product[property]，label:product[property]}
});
返回（）；
}

如果要使用lodash，则选项如下：

const options = _.map(products, (product) => {
    return { value: product[property], label: product[property] }
})

这就是您如何调用组件

我将您发布的json存储为products变量