javascript - 如何在设置状态元素之前停止将其传递给子组件?
问题描述
我正在用 React 编写一个天气预报应用程序。我正在从 openweathermap.org API 获取数据。但是要使用它,我需要知道用户的位置。因此,我也依次使用其他 API 来识别用户 IP、位置,然后根据该位置识别天气数据。在每个获取状态,我都会使用获取的信息更新初始状态。例如,当我获取 Ip 时,我使用 setState 更新状态中的 userIP,然后当获取纬度和经度时,我也更新 userLat 和 userLng。因此,states 中的 weatherData 最初是一个空数组,是最后一个被更新的数组。问题是,每次更改状态之一时都会运行渲染。由于我将 weatherData 作为道具传递给其中的一个子组件使用该获取的 weatherData 数组中的一个对象,我收到一个错误,因为在更新 weatherData 之前,渲染运行并将一个空数组传递给该组件。我尝试使用 if 语句在返回结果之前检查 weatherData 是否为空数组,但不知何故它不起作用。
这是我的 App.js 文件:
import React, {Component} from 'react';
import './App.css';
import Mainblock from './Mainblock';
import Hourly from './Hourly';
import Weekly from './Weekly';
class App extends Component {
constructor() {
super()
this.state = {
userIp: 0,
cityName: '',
cityNameNoSpace: '',
userLat: 0,
userLng: 0
}
}
componentDidMount(){
fetch("https://geoip-db.com/json/").then((data)=> {
return data.json();
}).then((ip)=>{
this.setState({userIp: ip.IPv4});
this.locateClient(this.state.userIp);
});
}
locateClient = (clientIp) => {
fetch(`https://ip-geolocation.whoisxmlapi.com/api/v1?apiKey=at_SECRETAPIKEY&ipAddress=${clientIp}`).then((data)=>{
return data.json();
}).then((locationInfo)=>{
this.setState({userLat: locationInfo.location.lat, userLng: locationInfo.location.lng, cityName: locationInfo.location.city});
let cityArray = Array.from(locationInfo.location.city);
let cityNameFiltered = '';
cityArray.forEach((letter)=>{
cityNameFiltered = cityNameFiltered + letter;
return cityNameFiltered;
})
this.setState({cityNameNoSpace: cityNameFiltered});
this.getWeatherData(this.state.cityNameNoSpace);
});
}
getWeatherData = (userCity) => {
fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${this.state.userLat}&lon=${this.state.userLng}&units=metric&appid=SECRETAPIKEY`).then((data)=>{
return data.json();
}).then((weatherInfo)=>{
this.setState({weatherData: weatherInfo});
});
}
render() {
return (
<div className="whole-container">
<div className="lside">
<Mainblock states={this.state}/>
<Weekly />
</div>
<Hourly />
</div>
);
}
}
export default App;
解决方案
由于您的Mainblock
组件期望 states 属性是一个具有属性 weatherData 的对象,其中 weatherData 应该是一个数组,因此您可以有条件地渲染组件。
有条件地渲染它看起来像下面这样:
render() {
return (
<div className="whole-container">
<div className="lside">
{Array.isArray(this.state.weatherData) && <Mainblock states={this.state}/> }
<Weekly />
</div>
<Hourly />
</div>
);
}
这样做的原因是 javascript 评估布尔表达式并在为 true 时返回表达式的右侧,否则返回 false。
> true && 123
< 123
> false && 123
< false
推荐阅读
- angularjs - bower 生成 es6 导出格式 Uncaught ReferenceError: angular is not defined
- svg - 不推荐使用 xlink:title 将标题添加到 SVG 的正确方法是什么?
- python - 为什么我会收到这个无效的语法错误?
- c# - asp.net mvc 5.0 中的 ValidateAntiForgeryToken - 如何使用 JSON 和 ajax 传递对象数组
- pandas - 将 vlookup 应用于 pandas 数据框的每个元素
- typescript - stackNavigator 中的模态反应本机博览会
- reactjs - 在 CardHeader Avatar={} 中测试更改复选框时遇到问题
- docker - 如何在 gitlab-ci 文件中安装 docker-compose 和 openjdk?
- c# - Listview 绑定适用于共享运行时,但在禁用时不起作用(Xamarin Forms / Visual Studio)
- python - Pycharm 中未显示 Tkinter 窗口