Средство выбора onValueChange () вызывается дважды - PullRequest
Новая
       13

Средство выбора onValueChange () вызывается дважды

1 голос
/ 16 марта 2019

Я хочу поддержать локализацию с использованиемact-18next. Этот компонент показывает Picker, устанавливает ключ LocalStorage (выбранный язык) и меняет язык приложения. Я заметил, что метод onValueChange вызывается дважды. Первый вызов (с использованием правильного нажатия на элемент выбора элемента выбора) имеет правильный параметр (язык, который я выбрал), второй вызов имеет значение первого элемента выбора, когда значения (!).

Пример : если я выбираю элемент выбора English, я вижу переключение выбора на английский (первый вызов _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>);
    }
}

Код основан на примере activ-i18next Expo https://github.com/i18next/react-i18next/tree/master/example/v9.x.x/reactnative-expo

1 Ответ

0 голосов
/ 16 марта 2019

Поиск в реагирующем сборщике кажется ошибочным.

Это исправление решило мою проблему https://github.com/facebook/react-native/issues/13351#issuecomment-450281257

...