Навигационные реквизиты ReactNative Redux не обновляются - PullRequest
Новая
       77

Навигационные реквизиты ReactNative Redux не обновляются

0 голосов
/ 28 февраля 2019

Я вижу изменение реквизита, но мой метод componentDidUpdate () не вызывается при переходе назад.Не знаю, почему, так как я использую избыточность и возвращаю новый объект.

Компонент, с которого я перемещаюсь: 

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 (), даже несмотря на то, что я должен отсылать обратно мелкую копию или переменные.

1 Ответ

0 голосов
/ 28 февраля 2019

Вместо этого следует использовать componentDidUpdate, поскольку компонент, к которому вы возвращаетесь, не отключается при удалении, componentDidMount вызывается только один раз при первом создании компонента. 

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

    //do something

  }
}
...