Question

当用户查看另一个用户的个人资料并尝试在导航栏中单击他们自己的个人资料链接时，该组件将永远不会更新。在Redux和React开发工具中，它都表明状态已正确更新，但组件似乎并未注意到和更新。

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参数

（不包括参数验证）

?amp

使用相同的路线和组件时，如何获取组件以更新路径更改？

1 个答案: