选择器 onValueChange() 调用了两次答案

【问题标题】：Picker onValueChange() called twice选择器 onValueChange() 调用了两次
【发布时间】：2019-08-07 13:30:32
【问题描述】：

我想使用 react-18next 支持本地化。此组件显示Picker，设置 LocalStorage 键（所选语言）并更改应用程序语言。我注意到onValueChange 方法被调用了两次。第一次调用（在 Picker 项目上使用正确的选择点击操作）具有正确的参数（我选择的语言），第二次调用具有第一个 Picker 项目的值，只要值为 (!)。

示例：如果我选择 English Picker 项目，我会看到 Picker 切换到英文（第一次调用 _changeLanguage()），然后再次切换到“设备”（第二次调用 _changeLanguage() ）。我确定这是一个异步操作问题，不知道在哪里..

@translate(['settings', 'common'], { wait: true })
export default class Settings extends Component {
    state = {};
     constructor(props)  {
        super(props);
    }
    componentWillMount() {
        this.getLang();
    }

    async _changeLanguage(ln) {
        const { t, i18n, navigation } = this.props;
        console.warn("_changeLanguage: ",ln)
        await this.promisedSetState({lang:ln})
        if(ln=="device") {
                console.warn("removing lang setting")
                await AsyncStorage.removeItem('@App:lang');
        } else {
                console.warn("lang setting: ", ln)
                await AsyncStorage.setItem('@App:lang', ln);
                i18n.changeLanguage(ln) 
        }

    };
    //get Language from AsyncStorage, if it has been previously set
    async getLang() {
        const value = await AsyncStorage.getItem('@App:lang');
        console.warn("getLangfrom asyncstorage:", value)
        if(value) await this.promisedSetState ({lang:value})
    }

    promisedSetState = (newState) => {
        return new Promise((resolve) => {
            this.setState(newState, () => {
                resolve()
            });
        });
    };
    render() {
        const { t, i18n, navigation } = this.props;
        const { navigate } = navigation;

        return (<View>
                    <Picker
                        selectedValue={this.state.lang}
                        onValueChange={(itemValue, itemIndex) =>this._changeLanguage(itemValue) }>
                        <Picker.Item color="#666" label="detected from device" value="device" />
                        <Picker.Item label="English" value="en" />
                        <Picker.Item label="Deutsch" value="it" />

                    </Picker>
                </View>);
    }
}

代码基于 react-i18next Expo 示例 https://github.com/i18next/react-i18next/tree/master/example/v9.x.x/reactnative-expo

【问题讨论】：

标签： react-native expo i18next react-i18next

【解决方案1】：

我不确定这是否属于这里，但如果有人遇到onValueChange 触发两次的问题并且使用react-native-picker-select 而不是默认的Picker，那么此解决方案可能适合您。

我最终使用itemKey 属性而不是value 并将每个项目的键设置为与其值相同。请注意，示例项目最终的形状如下：{ key: 'value1', value: 'value1', label: 'Your Label' } 其中key 和value 相同。

原代码：

<RNPickerSelect
   style={styles.picker}
   value={value}
   onValueChange={this.onValueChange}
   placeholder={placeholder}
   items={options}
/>

固定代码：

<RNPickerSelect
   style={styles.picker}
   itemKey={value}
   onValueChange={this.onValueChange}
   placeholder={placeholder}
   items={options}
/>

我的灵感来自于：GitHub issue。

【讨论】：

这当然属于这里，因为谷歌把我带到了这里，你的解决方案解决了我的问题！

【解决方案2】：

在 react-native Picker 周围搜索似乎有问题。

这个快速修复解决了我的问题https://github.com/facebook/react-native/issues/13351#issuecomment-450281257

【讨论】：