在 React.js 中更新数组并呈现新数据

Question

我在更新和呈现来自 API 调用的新数据时遇到问题。

我现在设置代码的方式如下：

JavaScript 文件以从 API 读取返回的 JSON - 调用：

我先声明一个数组，索引值如下：

const dataArray= [
  {
     data1:'',
     data2:'',
  }
];

我有一个函数可以解析来自 API 调用的数据，并将新数据重新分配给数组，如下所示：

    dataArray.data1 = newData1;

在从 JS 文件导出 dataArray 之前：

export { dataArray }

React部分设置如下：

我先创建构造函数：

  constructor(props){
    super(props);
    
    this.state = {
      data: dataArray,
    }
}

然后，在渲染中，我创建了一个名为 data 的常量，并将其设置为 this.state:

render(){
    const { temperatures } = this.state;

  return (  
    <div className="App">
      <Card        
        data1 = {  
          data.map(dataArray=> 
            <p key={data.data1}>
              {data.data1}
            </p>
            )
          }
       );
    };
  }
export default App;

如果我在 JavaScript 文件中插入一些任意数据 dataArray，这工作正常，但是当新数据可用时，这个新数据不会呈现到 DOM.

我挖了一下，我知道我需要使用 this.setState 在新数据可用时更新 DOM，而不是 this.state，但我不是确定在哪里使用 setState...

此致，汉斯-克里斯蒂安

整个代码如下所示： App.js

class App extends React.Component{
  constructor(props){
    super(props);
    
    this.state = {
      temperatures: forecastedTemperatures,
    }
    
}
  render(){
    const { temperatures } = this.state;
  return (  
    <div className="App">
      <Card       
        data1 = {  
          dataArray.map(data=> 
            <p key={data.data1}>
              {temperature.data1}
            </p>
            )
          }
      />
    </div>
  );
};
}
export default App;

callApiAndParse.js

import React, {Component} from 'react';
const fs = require('fs');

const dataArray= [
  {
    data1:'',
    data2:'',
   
  }
];

function parsionFunction(data1, data2
)
{  

    //This funciton just manipulated the data, and is outside the scope of this question

    dataArray.data1 = data1;
    dataArray.data1 = data2;
    
}

export { dataArray};

Answer 1

您可以使用 React 的生命周期方法之一 -> componentDidMount()，其中您可以在解析完成时以“异步”方式调用它并“等待”，之后您可以使用 this.setState() 将数据变量设置为状态。当它发生时，你甚至可以使用加载状态来改进你的 ui，这样用户就会知道正在加载某些东西。

示例：

假设您在构造函数中的原始状态变量是：

this.state = {
    dataArray = [],
    loading: true, // As component will be loading.
}

然后状态变化可能会发生这样的事情：

async componentDidMount() {
     try {
         const tempData = await parsingOfRecievedData(APICallFunction());
         this.setState(
            dataArray: tempData,
            loading: !this.state.loading, // Set to false, as prev value was true
         };
     } catch (error) {
          console.log(error.message);
          this.setState(
            loading: !this.state.loading, // Need to handle loading in case of errors / exceptions.
          );
     }
}

在 React.js 中更新数组并呈现新数据

Update array and Rendder new data in React.js

javascript

arrays

state

setstate

reactjs