React, Fetch API and Filtering data

20 浏览
0 Comments

React, Fetch API and Filtering data

我无法从我获取的URL中获取数据。我试图遍历获取的数组，然后计算对象中总共的小时数。这是来自我的API的一个示例数组。在渲染之后，我无法使用this.state.users.length来计算数组中对象的总长度，因此无法从数组中获取小时数。处理这种情况的最佳方法是什么？我的最终目标是将数组中的所有小时数相加，然后进行渲染。

我的fetch函数：

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) // 返回0 
    for (let i = 0; i < this.state.users.length; i++) {
      console.log('hours: ' + this.state.users[i].hours) // 不运行，因为长度为0
    }
  }

在挂载时调用：

  componentDidMount() {
    this.loadFromApi()
    this.countData()
  }

然后存储在state中：

  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); //输出0然后3
  console.log('render hours: ' + this.state.users[0].hours); //抛出错误
  return(
      hi
  );
}

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

0