Question

我看到道具发生了变化，但是向后导航时未调用我的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。我可以看到props在rerender内部发生了变化，但是导航到组件并没有更新componentDidMount（）中的props，即使我应该发回浅表副本或变量也是如此。

Answer 1

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

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

    //do something

  }
}

ReactNative Redux导航道具未更新

1 个答案: