Question

在这里我为state> currentWeather内部的变量设置默认值，如下例所示，然后再次为那些变量设置动态值以用于用户搜索字词，当未显示应用打开的静态值时，我该如何解决那？

class App extends Component {

state = {
currentWeather: {
  currentLocation: 'Colombo',
  currentDate: new Date(),
  currentTempreture: 28.3,
  currentWeatherLabel: 'rain',
  currentWind: 1.5,
  currentHumidity: 60,
},
}

getWeather = async (e) => {

this.setState({
  currentTempreture: data.main.temp,
  currentLocation: data.name,
  currentWind:data.wind.speed,
  currentHumidity: data.main.humidity,
  currentWeatherLabel: data.weather[0].description,
});
}

render() {

return (
  <div id="bsec" className="b-color body-sec">
     <div className="main-wrapper">
        <MainWidget location={this.state.currentLocation} date={this.state.currentDate} tempreture={this.state.currentTempreture} label={this.state.currentWeatherLabel} wind={this.state.currentWind} humidity={this.state.currentHumidity} pressure={this.state.currentPressure}/>
     </div>
  </div>    
);
}
}

Answer 1

您需要进行一些数据验证，因为如果data.main.temp为main或数据为空，undefined将破坏您的应用程序。

this.setState({

  currentTempreture: data && data.main && data.main.temp || 'default value',    
  currentLocation: data && data.name || 'default value',
  currentWind: data && data.wind && data.wind.speed || 'default value',
  currentHumidity: data && data.main && data.main.humidity || 'default value',
  currentWeatherLabel: data && data.wat && data.weather[0].description || 'default value',

});

例如：

具有数据验证

const data = {}

console.log(data && data.main && data.main.temp || 'default value')

没有数据验证

const data = {}

console.log(data.main.temp ? data.main.temp : 'default value')

Answer 2

this.setState({
 currentTempreture: data.main.temp ? data.main.temp:"static values",    
 currentLocation: data.name ? data.name :"static values",
 currentWind:data.wind.speed ? data.wind.speed : "static values",
 currentHumidity: data.main.humidity?data.main.humidity:"static values",
 currentWeatherLabel: data.weather.length>0 ? 
 data.weather[0].description : [],

});

您可以设置

Answer 3

因此，如果状态变量为null，则要更新它们。您可以尝试-

this.setState(state => ({
  currentTempreture: state.currentTempreture === null ? data.main.temp : state.currentTempreture,    
  currentLocation: state.currentLocation === null ? data.name : state.currentLocation,
  currentWind: state.currentWind === null ? data.wind.speed : state.currentWind,
  currentHumidity: state.currentHumidity === null ? data.main.humidity : state.currentHumidity,
  currentWeatherLabel: state.currentWeatherLabel === null ? data.weather[0].description : state.currentWeatherLabel,
}));

Answer 4

如julekgwa所述，您将需要验证数据或应用程序将中断，以下示例利用lodash的get方法来完成结果：

this.setState({
 currentTempreture: _.get(data, 'main.temp', "default value"),    
 currentLocation: _.get(data, 'name', "default value"),
 currentWind: _.get(data, 'wind.speed', "default value"),
 currentHumidity: _.get(data, 'main.humidity', "default value"),
 currentWeatherLabel: _.size(data.weather) > 0 ?  data.weather[0].description : [],
});

Answer 5

鉴于您的状态是一个对象，因此您可以执行以下操作：

if (Object.keys(your state).length) == 0 { 
      // Do something here 
}

或尝试使用your.state === null

如果这些变量为null，如何在setState中设置变量的值

5 个答案: