Как я могу получить компонент для обновления при изменении пути при использовании того же маршрута и компонента?

Question

Когда пользователь просматривает профиль другого пользователя и пытается щелкнуть ссылку своего профиля в навигационной панели, компонент никогда не обновляется. В инструментах Redux и React dev показано, что состояние обновлено правильно, но компонент, похоже, не замечает и не обновляет.

class App extends Component {  
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <NavbarFix />
          <Switch>
            <Route exact path="/" component={Posts} />
            <Route exact path="/submit" component={AuthRoute(Submit)} />
            <Route exact path="/signup" component={AlreadyAuth(SignUp)} />
            <Route exact path="/login" component={AlreadyAuth(LogIn)} />
            <Route exact path="/user/:id" component={AuthRoute(User)} />
            <Route exact path="/item/:id" component={AuthRoute(Item)} />
            <Route exact path="/admin" component={AdminAuth(Admin)} />
            <Route exact path="/banned" component={Banned} />
            <Route component={NoMatch} />
          </Switch>
        </div>
        </Router>
    );
  }
}

.

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      user: [],
      comments: []
    };

  }

  componentDidMount() {
    this.loadUser();
  }

  loadUser = () => {
    API.findUserById(this.props.match.params.id)
      .then(res => {
        console.log(res.data);
        this.setState({
          user: res.data.user,
          posts: res.data.user.Posts,
          comments: res.data.comments
        });
        console.log(this.state)
      })
      .catch(err => console.log(err));
      this.setState(this.state)
  }

  handleCommentDelete = id => {
    API.deleteComment(id)
      .then(res => this.loadUser())
      .catch(err => console.log(err));
  }

  handlePostDelete = id => {
    API.deletePost(id)
      .then(res => this.loadUser())
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div>
        <div className="container-fluid">
          <div className="row">
            <div className="col-4 user-data-container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>{this.state.user.username}'s Posts</h2>
                </div>
              </div>
              <hr className="pb-4" />
              <div className="row">
                <div className="col-12">
                  {this.state.posts.length > 0 ?
                    this.state.posts.map(post => (
                      <PostContainer handledelete={this.handlePostDelete} post={{ ...post, User: this.state.user }} key={post.id} check={this.props.id} />
                    ))
                    :
                    <h1>No Posts To Show!</h1>
                  }
                </div>
              </div>
            </div>
            <div className="col-4 user-data-container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>{this.state.user.username}'s Comments</h2>
                </div>
              </div>
              <hr className="pb-4" />
              <div className="row">
              <div className="col-12">
                {this.state.comments.length > 0 ?
                  this.state.comments.map(comments => (
                      <CommentContainer verified={this.state.user.verified} handledelete={this.handleCommentDelete} check={this.props.id} comment={comments} className="hover-effect single-comment" key={comments.id}/>
                  ))
                  :
                  <h1>No Comments To Show!</h1>
                }
                </div>
              </div>
            </div>
            <div className="col-4 user-data-container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>{this.state.user.username}'s Information</h2>
                </div>
              </div>
              <hr className="pb-4" />
              <div className="row">
              <div className="col-12">
                  <UserContainer user={this.state.user}/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    username: state.auth.username,
    id: state.auth.id,
    email: state.auth.email,
    profileImg: state.auth.profileImg,
    verified: state.auth.verified
  };
};

export default withRouter(connect(mapStateToProps)(User));

Я считаю, что это связано с тем же маршрутом и используемым компонентом, поэтому изменение фактически не замечено. Есть ли способ это исправить? Насколько я понимаю, компонент должен обновляться при изменении состояния.

Answer 1

Если ссылка направляет на тот же маршрут только с другим параметром, она не будет перемонтироваться / componentDidMount больше не будет вызываться.

Таким образом, вы можете использовать функцию жизненного цикла componentWillReceiveProps (newProps), найти newProps.match.params.id и сравнить его с this.props.match.id и, если другой вызов, снова вызовет loadUser.

** Вам также необходимо изменить функцию loadUser для принятия параметра id

(проверка параметров не включена)

componentDidMount() {
  this.loadUser(this.props.match.id);
}

loadUser = (id) => {
  API.findUserById(id)..
  …
}

componentWillReceiveProps(newProps) {
  if(newProps.match.params.id !== this.props.match.id) {
     this.loadUser(newProps.match.params.id)
  }
}