Как сделать рендеринг компонента реагирующей функции при смене хранилища? - PullRequest
Новая
       31

Как сделать рендеринг компонента реагирующей функции при смене хранилища?

0 голосов
/ 04 ноября 2019

У меня есть компонент функции UpdateCustomerScreen, который соединяется с redux store и использую react-navigation, чтобы перейти к SelectorGenderScreen.

selectedCustomer - это мои redux store данные. Я изменяю данные на SelectorGenderScreen, когда использую navigation.pop() на UpdateCustomerScreen. Я понятия не имею, как перерисовать UpdateCustomerScreen.

Вот мой UpdateCustomerScreen: 

const UpdateCustomerScreen = ({ navigation, selectedCustomer }) => {

  const gender = changeGenderOption(selectedCustomer.sex); // gender is an array.

  const [sex, setSex] = useState(gender); // set array to my state.

  console.log('sex', sex);

  return (
    <View>
      <TouchableOpacity onPress={() => navigation.push('SelectorGenderScreen')}
        <Text>Navigate to next screen</Text>
      </TouchableOpacity> 
    </View>
  );

const mapStateToProps = (state) => {
  const { selectedCustomer } = state.CustomerRedux;

  return { selectedCustomer };
};

export default connect(mapStateToProps, {})(UpdateCustomerScreen);

Вот мой SelectorGenderScreen: 

const SelectorGenderScreen = ({ navigation, selectedCustomer, changeGender }) => {

  const gender = changeGenderOption(selectedCustomer.sex);

  const [genderOption, setGenderOption] = useState(gender);

  return (
    <Header 
      title={Translate.chooseStore} 
      leftComponent={
        <BackButton onPress={() => navigation.pop()} />
      }
    />
    <TouchableOpacity onPress={() => changeGender(selectedCustomer, genderOption)}>
      <Text>Change the redux store data</Text>
    </TouchableOpacity>
  );

const mapStateToProps = (state) => {
  const { selectedCustomer } = state.CustomerRedux;

  return { selectedCustomer };
};

const mapDispatchToProps = dispatch => {
  return {
    changeGender: (selectedCustomer, genderOption) => {
      dispatch(changeGender(selectedCustomer, genderOption));
    }
  };
};

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

Я пытаюсь использовать useCallback() в UpdateCustomerScreen. Когда я navigation.pop(), он по-прежнему не рендерится. 

// my state
const [sex, setSex] = useState(gender);

// It is not working
useCallback(() => {
  console.log(sex);
},[sex]);

// It is not working
console.log('sex', sex);

return (
  // my view
);

Есть ли способ перерисовать UpdateCustomerScreen, когда значение избыточного хранилища было изменено?

...