Redux存储更改时如何重新渲染React Hook函数组件?

时间:2019-11-04 08:32:28

标签: react-native react-redux react-navigation react-hooks

我有一个功能组件UpdateCustomerScreenredux store连接,并使用react-navigation导航到SelectorGenderScreen

selectedCustomer是我的redux store数据。当我使用SelectorGenderScreennavigation.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
);

在redux存储值更改后,是否可以重新呈现UpdateCustomerScreen

0 个答案:

没有答案