如何在表格中呈现 React 中的状态数组

Question

我有一个进行 api 调用并获取数据的组件，我有一个状态为 6 的数组，使用 setState 我将数据添加到数组中，我想显示它。

我尝试了 this.state.array1.map 等...所以对于所有行的每个数组，但它没有正确显示它们，我还尝试将它们包装在 state 的对象中并映射对象，但它给出了我错了。

代码如下：

import React from 'react';
import axios from 'axios';




 class ListaMesaje extends React.Component {
 constructor(props){
 super(props);
 this.state = {
 obiect: {
 cif: [],
 data_creare: [],
 detalii: [],
 id: [],
 id_solicitare: [],
 tip: []
 }
 

 }
 }




 render() {

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

 for(var i = 0; i < 5; i++) {
  this.setState({cif: [...this.state.cif, persons.mesaje[i].cif]});
  this.setState({data_creare: [...this.state.data_creare, persons.mesaje[i].data_creare]});
  this.setState({detalii: [...this.state.detalii, persons.mesaje[i].detalii]});
  this.setState({id: [...this.state.id, persons.mesaje[i].id]});
  this.setState({id_solicitare: [...this.state.id_solicitare, persons.mesaje[i].id_solicitare]});
  this.setState({tip: [...this.state.tip, persons.mesaje[i].tip]});
  }

  })



   return(
  <div>

  {this.state.obiect.cif(x=>(
   <h3>{x}</h3>
   ))}

  </div>
  );
   }


   }

  export default ListaMesaje

如果 sombody 可以帮助我提供一个示例，说明如何在 html 表中呈现状态中的所有数组，我将不胜感激。

非常感谢

Answer 1

现在，您进行 API 调用，并在等待时进行渲染。当您收到数据并更新状态时，它会触发新的渲染和新的 API 调用。新渲染、新 API 调用等。

API 调用不应在 render 方法中完成。将其移至 componentDidMount 生命周期方法（或事件处理程序，取决于您期望的行为）。这样，当组件挂载时，它会进行 API 调用，使用初始数据进行渲染，并在您收到真实数据时再进行一次渲染。

而在您的渲染方法中，只需通过数组map()：

return(
    <div>
        {this.state.obiect.cif.map(x => (
            <h3>{x}</h3>
        ))}
    </div>
);