React Native Redux 导航道具未更新答案

【问题标题】：ReactNative Redux Navigation Props not UpdatingReact Native Redux 导航道具未更新
【发布时间】：2019-07-22 00:07:01
【问题描述】：

我看到 props 发生了变化，但是在返回时没有调用我的 componentDidUpdate() 方法。不知道为什么，因为我正在使用 redux 并返回一个新对象。

我正在导航的组件：

this.handleButtonPress = async () => {
      await changeChannel(uid);
      this.props.navigation.navigate(“Chat”);
    };

减速机：

case types.SET_CURRENT_CHANNEL:
      return {
        …state,
        currentChannel: action.channel
      };
    case types.SET_PRIVATE_CHANNEL:
      return {
        …state,
        isPrivateChannel: action.isPrivateChannel
      };

动作

export const setCurrentChannel = channel => ({
    type: types.SET_CURRENT_CHANNEL,
    channel
    })

export const setPrivateChannel = isPrivateChannel => ({
    type: types.SET_PRIVATE_CHANNEL,
    isPrivateChannel
    })

export const setUserPosts = userPosts => {
  return {
    type: types.SET_USER_POSTS,
    payload: {
      userPosts
    }
  };
};

export const changeChannel = userId => {
  return dispatch => {
  const channelId = getChannelId(userId);
  dispatch(setCurrentChannel(channelId));
  dispatch(setPrivateChannel(true));
};
}
const getChannelId = userId => {
  const currentUserId = firebaseService.auth().currentUser.uid;
  return userId < currentUserId
    ? `${userId}/${currentUserId}`
    : `${currentUserId}/${userId}`;
};

我正在导航回的组件：

componentDidMount() {
this.props.loadMessages(this.props.currentChannel || “MAIN”, this.props.isPrivateChannel);
    this.props.loadUsers();
  } 

render() {
    console.log(“CAN SEE CORRECT PROPS ON RERENDER”, this.props)
    const data = getChatItems(this.props.messages).reverse();

    function isEmpty(obj) {
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) return false;
      }
      return true;
    }

    return isEmpty(this.props.users) ? (
      <LoadingAnimation />
    ) : (
      <MessageListComponent data={data} users={this.props.users} 

        key={this.props.currentChannel}
        currentChannel={this.props.currentChannel}
        isPrivateChannel={this.props.isPrivateChannel}

      />
    );
  }
}

const mapStateToProps = state => ({
  messages: state.chat.messages,
  error: state.chat.loadMessagesError,
  users: state.chat.users,

  currentChannel: state.chat.currentChannel,
  isPrivateChannel: state.chat.isPrivateChannel,
  // userPosts: state.channel.userPosts,
});

const mapDispatchToProps = {
  loadMessages,
  loadUsers
};

MessagesListContainer.propTypes = {
  messages: PropTypes.object,
  users: PropTypes.object,
  error: PropTypes.string,
  loadMessages: PropTypes.func.isRequired,
  loadUsers: PropTypes.func.isRequired,

  currentChannel: PropTypes.string.isRequired,
  isPrivateChannel: PropTypes.bool.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(
  MessagesListContainer
);

我正在尝试返回一个新的 currentChannel 和 isPrivateChannel。我可以看到重新渲染内部的道具发生变化，但导航回组件并没有更新 componentDidMount() 中的道具，即使我应该发回浅拷贝或变量。

【问题讨论】：

标签： reactjs react-native redux react-navigation react-props

【解决方案1】：

您应该改用componentDidUpdate，因为您导航回的组件在您离开时没有卸载，componentDidMount 仅在组件首次创建时被调用一次。

componentDidUpdate(prevProps) {
  const {currentChannel and isPrivateChannel} = this.props;
  if(currentChannel && currentChannel !== prevProps.currentChannel 
    || isPrivateChannel && isPrivateChannel !== prevProps.isPrivateChannel) {

    //do something

  }
}

【讨论】：