将数据传递到 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_nameextractProps

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;

Answer 1

你真的不需要lodash来完成这个映射，这是一个使用纯js的解决方案：const ReactSelectComponent = ({property}) => {&nbsp; &nbsp; const options = products.map((product) => {&nbsp; &nbsp; &nbsp; &nbsp; return { value: product[property], label: product[property] }&nbsp; &nbsp; });&nbsp; &nbsp; return (<Select options={options}/>);}如果你想使用lodash，那么选项将是这样的：const options = _.map(products, (product) => {&nbsp; &nbsp; return { value: product[property], label: product[property] }})这就是您如何称呼组件 。<ReactSelectComponent property='product_name' />我存储了您发布的json作为产品变量。