Question

我正在尝试制作一个简单的天气应用程序作为React中的初学者项目。提取api数据后，我想将获得的值分配给状态，并且由于我似乎无法在其他任何地方设置状态，因此我在map函数中设置了状态。但是，我意识到尽管这样做可以完成，但是当我使用console.log（）时，状态被设置为7次。这是一个问题，因为我想将该数据作为道具传递给另一个组件，并且该数据被传递7次。所以我的问题是，是否有一种方法可以使我仅在map函数循环后且不再调用setState之后才能传递状态。

这是我的App组件：

class App extends React.Component{
    constructor(){
        super();

        this.onHandleSubmit = this.onHandleSubmit.bind(this);

        this.state = {
            term:"",
            weather: [],
            description: []
        };
    }

    onHandleSubmit(term){
        this.setState({term: term}, () =>{
            fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${this.state.term}&units=imperial&appid=${KEY}`)
                .then(results => {
                    return results.json();    
                }).then(data => {
                    console.log("Data:",data)
                    const response = data.list.slice(0,7).map((item) => {
                        return(
                            <div key={item.dt}>
                                {this.setState({
                                    weather:[...this.state.weather, item.weather],
                                    description: [...this.state.description, item.main]
                                    },() =>{
                                        console.log("Weather: ", this.state.weather)
                                    })}
                            </div>
                    );  
                });
            });            
        });
    }

    render(){
        return(
            <div>
                <SearchBar onSubmit={this.onHandleSubmit}/>
                <div>
                    <WeatherCardList weather={this.state.weather} description={this.state.description}/>
                </div>

            </div>
        );
    }
}

export default App;

，此onHandleSubmit函数是我在从搜索栏提交术语后从Api获取数据的地方。我也在这里映射数据并设置状态：

const response = data.list.slice(0,7).map((item) => {
                        return(
                            <div key={item.dt}>
                                {this.setState({
                                    weather:[...this.state.weather, item.weather],
                                    description: [...this.state.description, item.main]
                                    },() =>{
                                        console.log("Weather: ", this.state.weather)
                                    })}
                            </div>
                    );  
                });

编辑：这是我的WeatherCardList组件

const WeatherCardList = (props) =>{
  const weather = props.weather.map(weather => {
      return(
        <WeatherCard key={weather.id}/>

      );
  });  

  return <div>
    {weather}
  </div>
};

为了澄清，this.state.weather和this.state.description也是数组，因此需要WeatherCardList中的第二个地图函数。除了进行初始设置外，我还没有真正接触过WeatherCard组件，因为我想首先解决这个当前问题。

Answer 1

接收数据时不呈现输出。只需调用setState({data})，这将触发组件的新渲染。在render函数中进行地图迭代。

.then(results => {
   return results.json();
}).then(data => {
   console.log("Data:",data);
   this.setState({data});
})

render () {
   const {data} = this.state;

   return(
      <div>
         <SearchBar onSubmit={this.onHandleSubmit}/>
         {
            (!data || !data.list) ? null : (
               data.list.slice(0,7).map(item => (
                  <div key={item.dt}>
                     weather: {item.weather}
                     description: {item.main}
                  </div>
               ))
            )
         }
      </div>
   );
}

在Map函数中设置状态后，如何仅将状态作为道具传递一次

1 个答案: