在 React.js 中更新数组并渲染新数据

Posted 2023-02-22

【中文标题】在 React.js 中更新数组并渲染新数据

【英文标题】：Update array and Rendder new data in React.js

【发布时间】：2021-06-02 03:11:17

【问题描述】：

我在通过 API 调用更新和呈现新数据时遇到问题。

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

用于从 API 调用读取返回 JSON 的 javascript 文件：

我首先声明一个带有索引值的数组，如下：

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

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

    dataArray.data1 = newData1;

在从 JS 文件中导出 dataArray 之前：

export  dataArray 

React-part 设置如下：

我先创建构造函数：

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

然后，在渲染中，我创建了一个名为 data 的 const，并将其设置为 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...

问候， 汉斯-克里斯蒂安

整个代码如下所示： 应用.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;

【参考方案1】：

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

例子：

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

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.
          );