Question

我正在尝试构建一个针对天气的应用程序。我正在使用openweathermap API。我有一个组件，应该渲染5个天气组件，每个组件每天（这是5天的预报）。但是，有些东西不起作用。这是天气部分：

class Weather extends Component{

getAllDates = () =>{
    const list = this.props.list;
    let date = list[0]["dt_txt"].split(" ")[0];
    const datesList = [{date: date, indexes: [0]}];
    let indexes = [];
    for(let i = 1; i < list.length; i++){
        const currDate = list[i]["dt_txt"].split(" ")[0];
        if(date !== currDate){
            datesList.push({
                date: currDate,
                indexes: indexes});
            date = currDate;
            indexes = [];
        }
        else{
            const toUpdate = datesList.pop();
            const oldIndexes = toUpdate.indexes;
            const newIndexes = oldIndexes.push(i);
            toUpdate.indexes = newIndexes;
            datesList.push(toUpdate);
        }
    }
    return datesList;
}  

    render(){
        const datesList = this.getAllDates();
        return(
            <React.Fragment>
              {datesList.map((date, key) => {
                  return <DayWeather date = {date} 
                              key = {key}
                              forecastList = {this.props.list} />
              })}
            </React.Fragment>
        )

    }

在App.js中，我有条件地渲染它，如下所示：

{this.state.data === undefined ? <h1>Choose City</h1> :
   <Weather list = {this.state.data.list}/>}

问题是，从Weather组件的render函数调用了两次getAllDates。该循环进行2次迭代，而不是40次迭代，然后再次调用getAllDates。我不明白为什么，因为我在App.js中有条件渲染。而且，index变量在某些时候变成了一个数字而不是一个数组，然后我得到一个我做不到的错误.push到索引。

我不知道这里发生了什么，将不胜感激！谢谢！

**我在这里获取数据：

class App extends Component{
  constructor(){
    super();
    this.state = {
      data: undefined
    }

  }

  onSelectHandler = (event) =>{
    const city = event.target.value;
    const apiCall = `http://api.openweathermap.org/data/2.5/forecast?q=${city},il&APPID=${API_KEY}`
    fetch(apiCall)
    .then(response => response.json())
    .then(response => 
    {
      this.setState({
        data: response
      })
    }
  )

  }

试图在React无状态类组件中使用函数

0 个答案: