React Native跳过渲染之间

时间:2016-02-09 16:12:12

标签: reactjs react-native

我遇到一个问题,当我更改组件中的状态时,本机反应如何决定跳过重新渲染。

我有一个下拉菜单,当选择其中一个选项时,它会加载下一个下拉列表的选项。在这种情况下:国家和城市。我目前要做的就是在选择国家/地区时在城市下拉菜单下显示“正在加载”文字。以下是我的代码片段:

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})函数。

1 个答案:

答案 0 :(得分:0)

在同一个同步代码块中调用setState({loadingCity: true})然后setState({loadingCity: false})将无法呈现。即使它确实如此,它可能比你看到的更快。

如果您希望加载指示器保留,请不要将其设置为假。

如果您只想让它在几秒钟内可见,请将setState({loadingCity: false})包装在setTimeout中(尽管不要忘记使用react-timer-mixin)。