我有一个功能组件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
);
在redux存储值更改后,是否可以重新呈现UpdateCustomerScreen
?