Повторно отрендерить компонент React для запуска модального диалога - PullRequest
Новая
       3

Повторно отрендерить компонент React для запуска модального диалога

0 голосов
/ 05 мая 2020

На главной странице моего приложения при нажатии на уведомление, оно будет ссылаться на страницу профиля пользователя и откроет диалоговое окно сообщения. (ожидаемое поведение)

Однако, когда вы уже находитесь на странице профиля пользователя, нажатие на уведомление не открывает диалоговое окно публикации.

  • Со страницы профиля пользователя /users/notAirbud нажатие на уведомление https://imgur.com/a/HcmGxw1

  • приводит к /users/notAirbud/post/WeAXjjiqVHU1FvOe9Lkv но не повторно отображает PostDialog) https://imgur.com/a/Uycl2od

Вот задействованные компоненты.
* Уведомления 

return (
  <MenuItem key={notification.createdAt} onClick={this.closeHandler}>    
    {icon}
    <Typography component={Link} color='default' variant='body1' to={`/users/${notification.recipient}/post/${notification.postId}`}>
      {notification.sender} {verb} your post {time}
    </Typography>
  </MenuItem>
);

* UserProfile 

class UserProfile extends Component {
  state = {
    profile: null,
    postIdParam: null
  }

componentDidMount() {
  const handle = this.props.match.params.handle;
  const postId = this.props.match.params.postId;
    if (postId) {
      this.setState({
        postIdParam: postId
      });
    }
    this.props.getUserProfile(handle);
    axios
      .get(`/user/${handle}`)
      .then(res => {
        this.setState({
          profile: res.data.user
        })
      })
      .catch(err => {
        console.log(err);
      })
    }

    render() {
      ...
      <Post key={post.postId} post={post} openDialog />
    }
}

* Post 

class Post extends Component {
  render() {
    ...
    return (
      ...
        <PostDialog postId={postId} userHandle={userHandle} openDialog={this.props.openDialog} />
      ...
    )
  }
}

Post.propTypes = {
  user: PropTypes.object.isRequired,
    post: PropTypes.object.isRequired,
    openDialog: PropTypes.bool
};

const mapStateToProps = (state) => ({
  user: state.user
});

* PostDialog 

    state = {
        open: false,
        oldUrl: '',
        newUrl: ''
    }

    openHandler = () => {
        let oldUrl = window.location.pathname;
        const { userHandle, postId } = this.props;
        let newUrl = `/users/${userHandle}/post/${postId}`;

        // case if pastes url, therefore no previous url path
        if (oldUrl === newUrl) {
            oldUrl = `/users/${userHandle}`;
        }

        window.history.pushState(null, null, newUrl);
        this.setState({ open: true, oldUrl, newUrl });
        this.props.getPost(this.props.postId);
    };

    closeHandler = () => {
        // revert back to oldUrl
        window.history.pushState(null, null, this.state.oldUrl);
        this.setState({ open: false });
        this.props.clearErrors();
    };

    componentDidMount() {
        if (this.props.openDialog) {
            this.openHandler()
        }
    }

    const mapStateToProps = (state) => ({
      post: state.data.post,
      ui: state.ui
   });

Я пробовал 2 разных решения:

  • Rerender PostDialog, когда notificationId не совпадает.

    componentDidUpdate(prevProps) { if ((this.props.openDialog) && (this.props.user.notificationId !== prevProps.user.notificationId)) { this.openHandler(); } } const mapStateToProps = (state) => ({ .. user: state.user.notifications });

  • closeHandler из PostDialog (дочерний), чтобы обновить UserProfile ( parent) state

    UserProfile state = { dialogOpened: true} openDialogHandler = () => { this.setState(prevState => ({ dialogOpened: !prevState.dialogOpened })); } .. else return <Post key={post.postId} post={post} openDialog={this.openDialogHandler}

    PostDialog closeHandler = () => { .. this.props.openDialog(); };

Обе попытки не помогли решить проблему. Какие-либо предложения? Спасибо.

...