`javascript` 我们可以使用 map 函数参数值再次使用 map 函数吗？

Question

console.log(materialIngredientDetail)

[
    {
        "content": "asd",
        "type": "one",
        "certificationNum": "1123-522",
        "functionalList": [
            {
                "id": 132,
                "valueUnit": "mg",
                "functionalDisplayTxt": "hi"
            },
            {
                "id": 133,
                "valueUnit": "mg",
                "functionalDisplayTxt": "ww"
            },
            {
                "id": 134,
                "valueUnit": "mg",
                "functionalDisplayTxt": "ee"
            },
            {
                "id": 135,
                "valueUnit": "mg",
                "functionalDisplayTxt": "ff"
            }
        ]
    },
    {
        "content": "qwe",
        "type": "two",
        "certificationNum": "421-123",
        "functionalList": [
            {
                "id": 129,
                "valueUnit": "mg",
                "functionalDisplayTxt": "aa"
            },
            {
                "id": 130,
                "valueUnit": "mg",
                "functionalDisplayTxt": "bb"
            }
        ]
    }
]

我正在尝试使用 map 函数以 JSX 语法显示它。

  <div>
        {materialIngredientDetail.map((Fields, index) => (
          <Fragment key={`${Fields}~${index}`}>
            <Card title={`${Fields.type} - ${Fields.certificationNum} - ${Fields.content}`}>
            {Fields.functionalList.map((value, key) => {
                <> 
                <p>{value.id}</p>
                <p>{value.functionalDisplayTxt}</p>
                <p>123</p>
                <p>{value.valueUnit}</p>
                </>
            })}
            </Card>
          </Fragment>
        ))}
      </div>

问题是输出正常，没有错误，只是这里的代码部分没有输出数据值。

    {Fields.functionalList.map((value, key) => {
                <>
                <p>{value.id}</p>
                <p>{value.functionalDisplayTxt}</p>
                <p>123</p>
                <p>{value.valueUnit}</p>
                </>
            })}

是否无法使用 InputFields 参数值再次使用 map 函数？
我该如何修改代码？

Answer 1

您没有从第二张地图返回 jsx。试试下面列出的代码

{Fields.functionalList.map((value, key) => {
                        return (<>
                        <p>{value.functionalDisplayTxt}</p>
                        <p>123</p>
                        <p>{value.valueUnit}</p>
                        </>)
                    })}

或

{Fields.functionalList.map((value, key) => (<>
                        <p>{value.functionalDisplayTxt}</p>
                        <p>123</p>
                        <p>{value.valueUnit}</p>
                        </>)
                    )}

`javascript` 我们可以使用 map 函数参数值再次使用 map 函数吗？

`javascript` Can we use map function again using map function argument value?

javascript

json

ecmascript-6

reactjs