在获取数据后,Redux数据不会在UI中更新



我现在正在制作一个react原生应用程序。

在我的应用程序中,我得到了我的个人资料屏幕在CCD_ 1中,我得到了一个CCD_

在我的个人资料屏幕中,我正在使用useDispatch请求一个api。fetchAuthMember正在请求用户数据

useEffect(() => {
async function fetchData() {
await dispatch(fetchAuthMember(token.access_token));
await dispatch(fetchCountryList());
}
fetchData();
}, []);

我在配置文件组件中这样渲染

const renderItem = () => {
return (
<View>
<View style={styles.profileTitle}>
<Icon2 name="user-o" size={30} color="black" />
<Text style={styles.titleFont}> My Profile</Text>
<View style={styles.contentContainer}>
<Text style={styles.firstName}>{userInfo.FirstName}</Text>
<Text style={styles.lastName}>{userInfo.LastName}</Text>
</View>
</View>
<TouchableOpacity
style={styles.buttonHalfWidth}
onPress={() =>
navigation.navigate('EditProfile', {
screen: 'EditProfile',
params: {
firstName: userInfo.FirstName,
lastName: userInfo.LastName,
},
})
}>
<Icon2 name="edit" size={30} color="#0382C4" />
<Text style={styles.buttonText}>Edit</Text>
</TouchableOpacity>
</View>

所以当我按下编辑按钮时。它将导航到edit screen。在编辑屏幕

当用户按下按钮时,我正在更新这样的数据

let dataToSend = {
FirstName: FirstName,
LastName: LastName,
};
console.log(dataToSend)
await dispatch(updateMemberInfo(token.access_token, dataToSend));
await dispatch(fetchAuthMember(token.access_token));
navigation.navigate('MyProfile');

正如您所看到的,我正在使用async and await,并且我还在这里重用fetchAuthMember。这将在下次获取用户。之后导航到profile页面。问题是

我的profile page上的名字和姓氏没有更新。但如果我试着把它叫做post-man。我可以看到更新的数据。我缺什么了吗?

操作

export const fetchAuthMember = (token) => (dispatch) => {
alert('fetching member')
axios
.get(`${baseUri}/api/members`, {
headers: {
Authorization: `bearer ${token}`,
},
})
.then((res) => {
dispatch({
type: FETCH_USERINFO,
payload: res.data,
});
});
};
export const updateMemberInfo = (token, data) => (dispatch) => {
axios
.put(`${baseUri}/api/members/edit`, data, {
headers: {
'Authorization': `bearer ${token}`,
'Content-Type': 'application/json'
},
})
.then((res) => {
dispatch({
type: UPDATE_USERINFO,
payload: res.data,
});
}).catch((err) => {
console.log(err)
})
};

减速器

export const authReducer = (state = initialState, action) => {
switch (action.type) {
case LOGGED_IN:
return {...state, token: action.payload, loggedIn: true};
case LOGGED_OUT:
return {...state, token: '', loggedIn: false};
case FETCH_USERINFO:
return {...state, userInfo: action.payload};
case UPDATE_USERINFO:
return {...state};
default:
return state;
}
};

在您的操作中执行以下操作:profile screen0,此时您的操作没有返回承诺(如两次评论所述(。

相关内容

  • 没有找到相关文章

最新更新