Блог

У меня есть компонент, который выполняет вызов api и извлекает данные, и у меня есть массивы в состоянии 6, и с помощью setState я добавляю данные в массивы, и я хотел бы их отобразить.

Я попробовал this.state.array1.map и т. Д. … и так с каждым массивом для всех строк, но он не отображает их правильно, и я также попытался обернуть их в объект в состоянии и сопоставить объект, но это выдает ошибку.

Вот код:

 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.

Большое спасибо

Прямо сейчас вы выполняете вызов API, и пока вы ждете, вы выполняете рендеринг. Когда вы получили данные и обновили состояние, это запускает новый рендеринг и новый вызов API. Новый рендеринг, новый вызов API и т.д.

Вызовы API не должны выполняться в методе render. Переместите его в метод жизненного цикла componentDidMount (или в обработчик событий, в зависимости от ожидаемого поведения). Таким образом, когда компонент монтируется, он выполняет вызов API, выполняет рендеринг с исходными данными и другой, когда вы получили реальные данные.

И в вашем методе рендеринга просто map() через массив:

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