Question

我有一个React组件，它尝试使用axios调用来渲染表数据，更改嵌套对象的状态值，然后最后进行PUT调用：

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

所以最初，我在使用axios的componentDidMount期间设置对象的状态：

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

然后我创建了一个handle函数来更改特定的对象属性：

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

每当我更改表格上的下拉菜单的值时。它只是创建一个呈现新表行的新对象，而不更新特定的对象属性。任何帮助都将是惊人的。

编辑：添加并修复了一些代码。仍然有问题。

React-使用映射时如何从下拉列表更新嵌套对象

0 个答案: