时间戳

首页 > 解决方案 > React - 如何渲染字段数组的映射（对单个表单问题的多个响应）

javascript - React - 如何渲染字段数组的映射（对单个表单问题的多个响应）

问题描述

我试图弄清楚如何将 react-hook-forms 与字段数组一起使用。我有表单工作（这个代码沙箱是我测试更改以使其工作的地方：https ://codesandbox.io/s/react-hook-form-custom-input-7cdoh ），但我现在试图弄清楚如何渲染数据。

我可以将 json 数据包记录为：

"ethics": {
      "0": {
        "explain": "df",
        "managementPlan": "sdf"
      },
      "1": {
        "explain": "sdf",
        "managementPlan": ""
      },
      "value": "informedconsent",
      "label": "Informed consent"
    }

然后，在我的显示中，我试图循环遍历每个数组，如下所示： 

{state.data.ethics.each.map(ethics => <Tag color="magenta">{ethics.label}</Tag>)}

这不起作用 - 错误消息说：

TypeError：无法读取未定义的属性“地图”

我需要做什么来呈现输出？

标签： javascriptarraysreactjsreact-hook-form

解决方案

如前所述，您有一个道德对象而不是数组。

 object.keys(state.data.ethics).map(k=>{
      const obj = state.data.ethics[key]; 
    /* your obj will look like below
    {
            "explain": "df",
            "managementPlan": "sdf"
          }
    */

     // Do Whatever you want to do with obj now 
     return (<>
         <div>{obj.explain}</div>
         <div>{obj.managementPlan}</div>
     </>)

    });

推荐阅读