多次选择后，React native picker会更改redux存储状态

Question

我在一个组件中有两个<Picker />，它们都连接到redux存储，一个每次都成功地更改redux状态，第二个控制应用程序主题的工作一次然后我必须单击几个时间改变状态，似乎第二个选择器并不总是触发onValueChange()

Settings.js

import React, { Component } from 'react';
import { Cell, Section, TableView } from 'react-native-tableview-simple';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { View, Text, ScrollView, Picker, StyleSheet, Switch } from 'react-native';

const styles = StyleSheet.create({
  settingsBanner: {
    backgroundColor: '#27ae60',
    padding: '20%',
  },
  settingsBannerHeading: {
    textAlign: 'center',
    fontSize: 50,
    color: 'white',
  },
  settingsBannerSubheading: {
    textAlign: 'center',
    color: 'white',
  },
});

const Settings = ({ currentLanguage, currentTheme, changeLanguage, changeTheme }) => (
  <ScrollView style={{ backgroundColor: '#EFEFF4' }}>
    {/* TODO: Make banner change color based on current selected theme. */}
    {/* TODO: Remove inline styling that is too long. */}
    <View style={{ backgroundColor: currentTheme === 'two' ? '#000' : '#27ae60', padding: '20%' }}>
      <Text style={styles.settingsBannerHeading}>Test</Text>
      <Text style={styles.settingsBannerSubheading}>Settings</Text>
    </View>
    <TableView>
      <Section header="GENERAL">
        <Cell
          contentContainerStyle={{ paddingRight: 0 }}
          title="Language"
          cellAccessoryView={
            <Picker
              mode="dropdown"
              onValueChange={itemValue => changeLanguage(itemValue)}
              selectedValue={currentLanguage}
              style={{ width: '32%' }}
            >
              <Picker.Item key="1" label="English" value="en" />
              <Picker.Item key="2" label="Español" value="es" />
            </Picker>
          }
        />
      </Section>
      <Section header="PERSONALIZATION">
        <Cell
          title="Theme"
          contentContainerStyle={{ paddingRight: 0 }}
          subtitleColor="#9E9E9E"
          cellStyle="Subtitle"
          detail="Change the application theme"
          cellAccessoryView={
            <Picker
              mode="dropdown"
              onValueChange={itemValue => changeTheme(itemValue)}
              selectedValue={currentTheme}
              style={{ width: '32%' }}
            >
              <Picker.Item key="1" label="Default" value="one" />
              <Picker.Item key="2" label="AMOLED" value="two" />
            </Picker>
          }
        />
      </Section>
      <Section header="PRIVACY">
        <Cell
          title="Obscure"
          subtitleColor="#9E9E9E"
          cellStyle="Subtitle"
          detail="Hide the content of the app when changing application"
          cellAccessoryView={<Switch />}
        />
      </Section>
    </TableView>
    <Text>{currentTheme}</Text>
    <Text>{currentLanguage}</Text>
  </ScrollView>
);

const mapStateToProps = (state) => {
  return {
    currentTheme: state.configuration.currentTheme,
    currentLanguage: state.configuration.currentLanguage,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    changeTheme: (theme) => {
      dispatch({
        type: 'CHANGE_CURRENT_THEME',
        payload: theme,
      });
    },
    changeLanguage: (language) => {
      dispatch({
        type: 'CHANGE_CURRENT_LANGUAGE',
        payload: language,
      });
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Settings);

configurationReducer.js

const initialState = {
  currentLanguage: 'en',
  obscure: false,
  currentTheme: 'one',
};

const configurationReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHANGE_CURRENT_LANGUAGE':
      state = {
        ...state,
        currentLanguage: action.payload,
      };

      return state;
    case 'CHANGE_CURRENT_THEME':
      state = {
        ...state,
        currentTheme: action.payload,
      };

      return state;
    case 'ACTIVATE_OBSCURE':
      state = {
        ...state,
        obscure: true,
      };

      return state;
    case 'DEACTIVATE_OBSCURE':
      state = {
        ...state,
        obscure: false,
      };

      return state;
    default:
      return state;
  }
};

export default configurationReducer;