React Native 跳过中间渲染答案

【问题标题】：React Native skips in-between renderingReact Native 跳过中间渲染
【发布时间】：2016-02-09 16:12:12
【问题描述】：

当我更改组件中的状态时，我遇到了与 react native 如何决定完全跳过重新渲染有关的问题。

I have a drop-down menu which when one of its option is chosen, it will load the option of the next drop-down.在这种情况下：国家和城市。我目前要做的就是在选择一个国家/地区时在城市下拉菜单下显示“正在加载”文本。这是我的代码的 sn-p：

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

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

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

如果您希望加载指示器保持不变，请不要将其设置为 false。

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

【讨论】：

我实际上希望它只在显示文本“请先选择一个国家/地区”的那一刻起一直存在，直到它变为下拉菜单。我可以通过什么方式实现这一目标？
只需删除this.setState({loadingCity: false}) 调用。这样，只要 loadingCity 为真，它就会显示出来。我假设您正在加载带有获取请求或类似内容的城市。加载城市时，将 loadingCity 设置为 false 以隐藏微调器。
我实际上只循环了我在异步存储中已有的数组。这就是让这个过程超级快速的原因。
好吧 setTimeout 不起作用，导致您立即调用该函数，将this.setTimeout(this.setState({loadingCity: false}),100000);修改为this.setTimeout(() => this.setState({loadingCity: false}),100000);