反应、获取 API 和过滤数据

Posted 2023-02-22

【中文标题】反应、获取 API 和过滤数据

【英文标题】：React, Fetch API & Filtering data

【发布时间】：2018-06-16 19:51:13

【问题描述】：

我无法从获取的 URL 中获取数据。我正在尝试遍历获取的数组，然后计算对象中的总小时数。这是我的 API 中的一个示例数组。在渲染之后，我无法用this.state.users.length 计算数组中对象的总长度。因此我无法从阵列中抢时间。处理这个问题的最佳方法是什么？我的最终目标是将所有时间添加到数组中然后渲染。

[
 
   name: "a_example_010618",
   type: "A",
   key: 1,
   hours: 12
 ,
 
   name: "b_example2_010618",
   key: 2,
   type: "B",
   hours: 20
 ,
 
   name: "c_example_010618",
   key: 3,
   type: "C",
   hours: 8
 
]

我的获取功能：

loadFromApi() 
    fetch('/myAPI')
     .then(response => response.json())
     .then(data => 
         this.setState( users: data )
     )
     .catch(error => console.log('error fetching', error))

尝试将小时数注销到控制台

  countData() 
    console.log('length: ' + this.state.users.length) // returning 0 
    for (let i = 0; i < this.state.users.length; i++) 
      console.log('hours: ' + this.state.users[i].hours) // not running because the length is 0
    
  

在挂载时调用：

  componentDidMount() 
    this.loadFromApi()
    this.countData()
  

然后存入状态：

  constructor(props) 
    super(props);
    this.state = 
      users: []
    

    this.loadFromApi = this.loadFromApi.bind(this);
    this.countData = this.countData.bind(this);
  ;

渲染示例：

render() 
  console.log('render users: ' + this.state.users); // logs 0 then 3
  console.log('render hours: ' + this.state.users[0].hours); //throws err
  return(
    <div>
      hi
    </div>
  );

在渲染函数中，我可以很好地调用this.state.users.length 并记录值 3，但是我无法显示来自 api 的任何其他数据。

【问题讨论】：

你的渲染函数代码在哪里？

设置状态后需要调用countData。不是在开始抓取后立即进行。

@AbderrahmaneTAHRIJOUTI 添加示例

@Bergi 我尝试在componentDidUpdate 中调用countData 但我仍然遇到同样的问题。有没有更好的方法来做到这一点？

【参考方案1】：

您是否尝试在设置state 后调用countData？看起来像这样：

loadFromApi() 
    fetch('/myAPI')
        .then(response => response.json())
        .then(data => 
            this.setState( users: data )
            this.countData();
         )
        .catch(error => console.log('error fetching', error))

在render():

render() 
  const  users  = this.state;
  console.log('render users: ' + users); // logs 0 then 3
  users && console.log('render hours: ' + users[0].hours); //conditioned rendering
  return(
    <div>
      hi
    </div>
  );

这一行users && console.log('render hours: ' + users[0].hours);，简单的说，如果users被定义，首先登录用户hours。