Question

要在状态数组变量中存储API数据。并且此API每5分钟被调用一次以检查更新，因此在每次API调用中，我都会将API数组数据存储在state数组变量中，并循环遍历state数组并在表中显示数据。请检查我的代码并提出解决方案？并且还有另一个问题，该语句将实际执行什么操作[... this.state.info1，result.info1]，它将数据添加到现有数组还是将替换旧数组？

我放入了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

处于更新状态的阵列不会替换阵列数据，而是再次追加阵列

2 个答案: