我遇到一个问题,当我更改组件中的状态时,本机反应如何决定跳过重新渲染。
我有一个下拉菜单,当选择其中一个选项时,它会加载下一个下拉列表的选项。在这种情况下:国家和城市。我目前要做的就是在选择国家/地区时在城市下拉菜单下显示“正在加载”文字。以下是我的代码片段:
onCountryChange(country) {
this.setState({loadingCity: true});
//looping country array here to get the list of city option
this.setState({loadingCity: false});
}
render () {
return (
<View>
<Text>Country</Text>
<View>
<Dropdown
style={{ height: 20, width: 300}} values={this.state.country_name}
selected={0} onChange={this.onCountryChange.bind(this)}/>
</View>
</View>
<View>
<Text>City</Text>
{ this.state.selectedCountry != '' ?
<View>
<Dropdown
style={{ height: 20, width: 300}} values={this.state.city_name}
selected={0} onChange={this.onCityChange.bind(this)}/>
</View>
:
<Text>Please pick a country first</Text>
}
{ this.state.loadingCity?
<View>
<View>
<Image
style={{height: 10, width: 10}}
source={require('./images/loading.gif')} />
</View>
<Text>Loading</Text>
</View>
:
null
}
</View>
)
}
我尝试删除代码行this.setState({loadingCountry: false})
,它实际上显示了加载文本。但显然,当我添加代码行时,react native会完全跳过与loadingCountry相关的渲染。有没有办法强制加载出现?我已经尝试过使用this.forceUpdate()
,但它仍无效。
更新:这是我尝试使用Timer Mixin做的事情:
onCountryChange(country) {
this.setState({loadingCity: true});
//looping country array here to get the list of city option
this.setTimeout(this.setState({loadingCity: false}),100000);
}
但由于某些原因,setTimeout实际上并没有等待100秒才能触发this.setState({loadingCity: false})
函数。
答案 0 :(得分:0)
在同一个同步代码块中调用setState({loadingCity: true})
然后setState({loadingCity: false})
将无法呈现。即使它确实如此,它可能比你看到的更快。
如果您希望加载指示器保留,请不要将其设置为假。
如果您只想让它在几秒钟内可见,请将setState({loadingCity: false})
包装在setTimeout中(尽管不要忘记使用react-timer-mixin)。