Реагировать - Как обновить вложенный объект из раскрывающегося списка при использовании сопоставления - PullRequest
Новая
       13

Реагировать - Как обновить вложенный объект из раскрывающегося списка при использовании сопоставления

0 голосов
/ 19 марта 2019

У меня есть компонент React, который пытается визуализировать данные таблицы с помощью вызовов axios, изменить значения состояния вложенных объектов, а затем выполнить вызов PUT: 

constructor(props) {
 super(props);
 this.state = {
  objects: [],
  isLoading: true,
  date: new Date(),
 }
}

Итак, изначально я установил состояние объектов во время componentDidMount, используя axios: 

componentDidMount() {
const { objects, date } = this.state;
axios.get('http://api/objects')
  .then(result => {
    result.data.content.forEach(val => {
      objects.push({
        id: val.id,
        name: val.name,
        status: 'ok',
        date: this.dateParser(date),
      })
      this.setState({ isLoading: false })
    })
  })

}

Затем создание семантической таблицы в React: 

render() {
 const { objects } = this.state;

 <Table.Body>
  {objects.map((object, index) =>
   <Table.Row key={index}>
    <Table.Cell collapsing><Checkbox slider /></Table.Cell>
    <Table.Cell>{object.name}</Table.Cell>
    <Table.Cell>
     <Dropdown fluid button compact selection
         placeholder='Status'
         onChange={this.handleStatusChange.bind(this)}
         options={statusOptions}
         value={object.status}
      />
    </Table.Cell>
    <Table.Cell>{object.date}</Table.Cell>
   </Table.Row>)
   }
  </Table.Body>
}

Я также отображаю раскрывающийся список с различными параметрами состояния: 

const statusOptions = [{ key: 1, text: 'Ok', value: 'ok' },{ key: 2, text: 'Warning', value: 'warning' }, { key: 3, text: 'Unavailable', value: 'unavailable' }, { key: 4, text: 'Planned Outage', value: 'plannedOutage' }]

И я создал функцию дескриптора для изменения свойства конкретного объекта: 

handleStatusChange = (e, {value}) => {
this.setState({ object: {...this.state.object, status:value}});
}

Всякий раз, когда я меняю значение выпадающего списка. Он просто создает новый объект, который отображает новую строку таблицы вместо обновления свойства конкретного объекта. Любая помощь будет потрясающей.

РЕДАКТИРОВАТЬ: добавлен и исправлен некоторый код. Все еще возникают проблемы.

...