获取数据后，Redux 数据未在 UI 中更新

Question

我现在正在制作一个 React Native 应用程序。

在我的应用中，我看到了我的个人资料屏幕 在profile screen 中，我得到了一个edit button，这将导致编辑屏幕

在我的个人资料屏幕中，我正在使用 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 上的名字和姓氏没有更新。但是，如果我尝试在邮递员中调用它。我可以看到更新的数据。我有什么遗漏吗？

行动

 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;
  }
};

Answer 1

在您的操作中执行以下操作：return axios...，目前您的操作没有返回承诺（如两次评论）。