как динамически добавить каждое имя поля и соответствующее ему значение в один объект json - PullRequest
Новая
       13

как динамически добавить каждое имя поля и соответствующее ему значение в один объект json

0 голосов
/ 29 октября 2018

Я новичок в React js, в моем единственном компоненте я задаю имя поля динамически, оно приходит из API в избыточное хранилище, а затем из его входит в мой компонент,

Я хочу сделать один массив, который я могу передать API в методе Post, который будет иметь пару ключ-значение,

Вот как я строю динамические поля 

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

В buildTemplate () я отрисовываю элементы html, используя оператор if else, и с каждым элементом я использую функцию, которая может дать изменение состояния этого поля. 

 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' }  ]

1 Ответ

0 голосов
/ 29 октября 2018

Невозможно динамически загружать все атрибуты 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"}]}
/>
...