如何将每个字段名及其各自的值动态添加到一个 json 对象中

Question

我是 React js 新手，在我的一个组件中我动态设置字段名称，它来自 api 到 redux 存储，然后从它们进入我的组件，

我想创建一个可以在 Post 方法中传递给 API 的数组，该数组将具有键值对，

这就是我构建动态字段的方式

        <Panel.Body key={index}>
        {
        this.buildTemplate(item,index)
        }
        </Panel.Body>

在 buildTemplate() 中，我使用 if else 语句渲染 html 元素，并且我使用的每个元素都可以使用可以更改该字段状态的函数。

 if (['url', 'text', 'title'].indexOf(role) >= 0) {
        return (
            <FormControl  type={role.toLowerCase()} placeholder={role} onChange={this.handleShareholderNameChange(id,item.label)}/>
        )
    } else if (['date'].indexOf(role) >= 0){
        return (
            <DatePicker id="from-date-dt" onChange={this.handleShareholderNameChange(id,item)}/>
        )

在我的句柄ShareholderNameChange中

handleShareholderNameChange(id,item){
   var obj={}
   var array= []
   if(obj.id===undefined || obj[fieldName] === undefined){
       obj.id = id;
       obj[fieldName] = evt.target.value;
       array.push(obj);
   }
   if(obj.id === id){
       obj.id = id;
       obj[fieldName]= evt.target.value;
       array.push(obj);
   }
   console.log("array",array);
}

我希望每个输入数据的字段名称如下..

  array = [  { id:1, name:'abc', url:'xyz' },  { id:2, name:'abcd',
 url:'xyz2sqssqsq' }  ]

Answer 1

不可能动态加载所有 JSON 属性，您构建它的方式看起来不错。但总会有一个时刻，您必须手动输入所有属性。将 json 对象加载到 React 组件中最动态的方法是使用 ReactTable。

然后你可以这样做：

<ReactTable data={[  { id:1, name:'abc', url:'xyz' },  { id:2, name:'abcd',
url:'xyz2sqssqsq' }  ]}
columns={[{"Header": "id", accessor: "id"}, {"Header": "name", accessor: "name"}, {"Header": "url", accessor: "url"}]}
/>