向包含数组的对象添加 React 中处于状态的对象

Question

您好，我正在构建一个呈现 table 的应用程序，该应用程序从 API.

接收数据

我正在使用 table MDBReact，但我很难向 table 添加行。

在 this.state 中，我有一个对象数据table，其中包含一个名为行的数组，我想向该数组添加对象。

这是代码，我已经尝试过，但它不起作用。

问题在this.setState，我应该如何编写将对象添加到数据table对象中包含的数组。谢谢

import React, { useState } from 'react';
import { MDBDataTableV5 } from 'mdbreact';
import axios from 'axios';






class ListaMesaje extends React.Component {

componentDidMount() {
axios.get(`http://localhost/spv/react-php/src/server.php`)
.then(res => {
  const persons = res.data;

  for(var i = 0; i < 3; i++) {
   
  this.setState({datatable:{...this.state.datatable,rows:persons.mesaje[i]}})
    
    
    
  }

})

}

constructor(props){
super(props);
this.state = {
datatable: {
  columns: [
    {
      label: 'CIF',
      field: 'cif',
      width: 150,
      attributes: {
        'aria-controls': 'DataTable',
        'aria-label': 'Name',
      },
    },
    {
      label: 'Data creare',
      field: 'data_creare',
      width: 270,
    },
    {
      label: 'ID Solicitare',
      field: 'id_solicitare',
      width: 200,
    },
    {
      label: 'Tip',
      field: 'tip',
      sort: 'asc',
      width: 100,
    },
    {
      label: 'ID',
      field: 'id',
      sort: 'disabled',
      width: 150,
    },
    {
      label: 'Detalii',
      field: 'detalii',
      sort: 'disabled',
      width: 100,
    },
  ],
  
  rows: [
    
 
  ],
}
}
}

render() {
return(
<div>
<MDBDataTableV5 hover entriesOptions={[5, 20, 25]} entries={5} pagesAmount={4} data= 
{this.state.datatable} fullPagination />
</div>
);
}

}

export default ListaMesaje;

Answer 1

你应该简单地替换

  for(var i = 0; i < 3; i++) { 
  this.setState({datatable:{...this.state.datatable,rows:persons.mesaje[i]}})
  }

至

 this.setState({datatable:{...this.state.datatable,rows:[...persons.mesaje]}})

向包含数组的对象添加 React 中处于状态的对象

Adding to object that contains an array an object in state in React

javascript

reactjs

mdbreact