反应导航只获取一次参数答案

【问题标题】：React navigation getting params only once反应导航只获取一次参数
【发布时间】：2021-07-06 17:31:40
【问题描述】：

我正在使用 react nativation，并且正在尝试将参数传递到屏幕。但是，当我这样做时，它只在第一次工作，当我尝试使用不同的值访问同一个屏幕时，导航工作但屏幕保留了第一个导航事件的值。例如，当我选择用户John Bolton 时，它会显示该用户的信息。但是，当我返回并选择另一个用户时，它总是显示John Bolton 的信息。

这是我访问屏幕的代码：

goToUserPanel = item => {
  const { navigation } = this.props;

  const selectedUser = item;

  navigation.navigate('UserPanel', { selectedUser });
}

这是我接收参数的屏幕：

constructor(props) {
    super(props);
    const { navigation, properties } = props;
    const selectedUser = navigation.getParam('selectedUser', null);

    this.state = {
      allProperties: properties.allProperties || [],
      selectedUser: selectedUser,

      selectedUserImage: selectedUser.userImage,
      selectedUserName: selectedUser.userName,
      selectedUserId: selectedUser.id,
      selectedUserVerified: selectedUser.verified,

      propertiesFiltered: [],
      modalVisible: false
    };
 }

我认为这不是 stackNavigation 问题，因为正如我之前所说，参数传递有效，但仅在第一次时有效，然后在随后的时间里它会从第一次开始保留数据。不过，如果你好奇的话，这里是 stackNavigator 的代码

const ProfileDrawer = createDrawerNavigator(
  {
    Profile: UserProfile,
    About: AboutScreen,
    UserProfileEdit: EditUserProfile,
    EditUsers: EditUsers,
    UserPanel: UserPanelScreen,
    ListProperties: PropertiesList
  },
  {
    drawerWidth: WIDTH * 0.69,
    drawerType: 'front',
    drawerPosition: 'right',
    contentComponent: UserProfileDrawer
  }
);

【问题讨论】：

我认为问题在于您在构造函数中设置了参数selectedUser。该代码只运行一次。
这是一个有效的评论，但是，我有另一对屏幕具有几乎相同的行为并且没有这种类型的问题

标签： reactjs react-native react-navigation

【解决方案1】：

您是否在此行之前检查了“item”和“selectedUser”的值，以验证它们是否包含所需的值？这可能会给你一些关于这个问题的提示。

navigation.navigate('UserPanel', { selectedUser });

【讨论】：

是的，我在导航之前做了一个console.log(item); 和一个console.log(selectedItem);。它总是返回我试图在userPanel 屏幕上显示信息的用户的值，但UserPanel 屏幕仍然“保留”第一个导航事件的值。

【解决方案2】：

试试这个

const screen1 = (props) => {
    goToUserPanel = item => {
        const { navigation } = this.props;
        navigation.navigate('UserPanel', { 
            selectedUser: item
        });
    }
}

const UserPanel = (props) => {
    let selectedUser = props.route.params.selectedUser;
    console.log("Selected User", selectedUser);
}

【讨论】：