reactjs - 尝试在反应无状态类组件中使用函数

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}/>}

问题是，getAllDates 在 Weather 组件的渲染函数中被调用了两次。循环进行 2 次迭代而不是 40 次，然后再次调用 getAllDates。我不明白为什么，因为我在 App.js 中有条件渲染。此外，索引变量在某些时候变成了一个数字而不是一个数组，然后我得到一个错误，我不能做 .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
      })
    }
  )

  }

标签： reactjs