Массив в состоянии при обновлении не заменяет данные массива, вместо этого добавляя массив снова и снова

Question

Хотите сохранить данные API в переменной массива состояний.И этот API будет вызываться каждые 5 минут для проверки обновлений, поэтому при каждом вызове API я буду хранить данные массива API в переменной массива состояний, проходить через массив состояний и отображать данные в таблице.пожалуйста, проверьте мой код и предложите мне решение?а также у меня есть еще один вопрос, что на самом деле будет делать этот оператор [... this.state.info1, result.info1], он будет добавлять данные в существующий массив или заменяет старый массив?

Я поставил set Intervalи вызвал API, получил результаты и обновил значение в массиве состояний, чтобы каждый раз показывать один массив данных (индекс 0), но каждый раз при обновлении он увеличивал индекс массива, как (индекс 0, индекс 1)

this.state = {
  Info1 : [],
  Info2 : [],
  Info3 : []
}

componentDidMount() {
this.timer = setInterval(() => this.getSchedulerDashboard_Data(),100000);
this.getSchedulerDashboard_Data();
}

getSchedulerDashboard_Data () {
fetch('URL', {
  method : 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body :JSON.stringify({
    …..
  })
  …..
  ….
  ….
 .then(result => {
   this.setState({
      Info1 : [...this.state.Info1, result.info1],
      Info2 : [...this.state.Inf02, result.info2],
      Info3 : [...this.state.Info3, result.info3]
    }

  render() {
   ….
   ….
  console.log(
  this.state.Info1.map (data => {
     return (data)     //data will print the array 
     })
   })
  )


Actual results :
 on page load the array contains 11 records

[Array(11)]      //array contains one array of data at 0 index
 0: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 1
__proto__: Array(0)

//Data inside the array at index(0& 1)
0: {name: "john", age: "25", country: "England"}
1: {name: "joe", age: "45", country: "France", }

after the time interval, API is called again and state is update then the result is

(2) [Array(11), Array(11)]          //see the array increased with index(0&1) which I doesn't want
 0: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
 1: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
 length: 2
 __proto__: Array(0)

//Data inside the array at index(0& 1)
0: {name: "john", age: "25", country: "England"}
1: {name: "joe", age: "45", country: "France", }

//Data inside the array at index(0& 1)
0: {name: "john", age: "25", country: "England"} 
1: {name: "joe", age: "45", country: "France", }

Expected result should be:
on page load:

[Array(11)]      //array contains one array of data at 0 index
0: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 1
__proto__: Array(0)

//Data inside the array at index(0& 1)
0: {name: "john", age: "25", country: "England"}
1: {name: "joe", age: "45", country: "France", }

After time interval the result should be the same

[Array(11)]      //array contains one array of data at 0 index
0: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 1
 __proto__: Array(0)

//Data inside the array at index(0& 1)
0: {name: "john", age: "25", country: "England"}
1: {name: "joe", age: "45", country: "France", }

Answer 1

Вы добавляете свои данные вместо обновления новыми данными.

измените

Info1 : [...this.state.Info1, result.info1],
Info2 : [...this.state.Inf02, result.info2],
Info3 : [...this.state.Info3, result.info3]

на

this.setState({
  Info1 : result.info1,
  Info2 : result.info2,
  Info3 : result.info3
})

Answer 2

Fixed the issue by own, first changed the state variable

    this.state = {
       Info1 : {},
       Info2 : {},
       Info3 : {}
    } 
……. fetch response
    .then(result => {
       this.setState({
            Info1 : result.info1,
            Info2 : result.info2,
            Info3 : result.info3
        }

after setting the array in state, iterate and display the array in table like

      Object.keys(this.state.Info1).map( (key,index) => {
       return (
         <tr key={index}></tr>
         <td>{this.state.Info1[key].name</td>
          })

I used Object.keys to iterate because can't able to use map directly