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

Question

这是我的产品.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": ""    }  ]}现在，在组件下 i 正在映射选项 从 products.json （ ） 中选择字段 并返回它。在这个例子中，我映射为选择按钮的选项。react-selectproduct-name我想使这个组件可重用，这样我就可以用道具传递数据并使用它（即。 而不是。来自 props 的数据存储在其中，其中是 String 类型（但不需要）。product-idproduct-nameconst extractProps我在用道具中的数据替换产品中的密钥时遇到问题。product_nameextractPropsReactSelectComponent.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;

Answer 1

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

const ReactSelectComponent = ({property}) => {

    const options = products.map((product) => {

        return { value: product[property], label: product[property] }

    });

    return (<Select options={options}/>);

}

如果你想使用lodash，那么选项将是这样的：

const options = _.map(products, (product) => {

    return { value: product[property], label: product[property] }

})

这就是您如何称呼组件 。<ReactSelectComponent property='product_name' />

我存储了您发布的json作为产品变量。