当 redux store 更新时，React 导航弹出到顶部

Question

当我更改我的 redux 存储时，我正在编辑配置文件，导航堆栈会弹出到堆栈的顶部屏幕。就像我在 redux 状态更改时编辑配置文件屏幕上一样，它会返回到设置屏幕。 我在这里做错了什么？

减速器

case TYPES.UPDATE_PROFILE:
  const data = {...state};
  const payload = actions.payload;
  return {
    ...state,
    user: {
      ...data.user,
      first_name: payload.first_name,
      last_name: payload.last_name,

      ['user_info']: {
        ...data.user.user_info,
        gender: payload.gender,
        date_of_birth: payload.date_of_birth,
        phone_number: payload.phone_number,
      },
    },
  };

操作代码

dispatch({
  type: TYPES.UPDATE_PROFILE,
  payload: params,
});

导航文件（使用 react navigation v5）

 function ProfileScreens() {
return (
  <Stack.Navigator>
    <Stack.Screen
      name="Settings"
      component={Settings}
      options={{headerShown: false}}
    />
    <Stack.Screen
      name="ProfileView"
      component={Profile}
      options={{headerShown: false}}
    />
    <Stack.Screen
      name="EditProfile"
      component={EditProfile}
      options={{headerShown: false}}
    />
  </Stack.Navigator>
);

}

有人可以帮我解决这个问题吗？

Answer 1

您可以在动作创建者中使用 React 历史重定向-

import history from "./history"

dispatch({
  type: TYPES.UPDATE_PROFILE,
  payload: params,
});

 history.push("path after redirection");

history.js

import { createBrowserHistory } from 'history'; 


export default createBrowserHistory();

最新的 React 版本