Javascript 更新单个用户详细信息页面的反应状态

我有一个用户详细信息页面和一个用户列表页面。只需单击列表页面上的链接，这将在页面底部呈现用户详细信息。如果选择其他用户，则应使用新数据更新组件。react似乎不会更新状态，并且第一个select用户的数据仍然可见

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    };
    this.getUser = this.getUser.bind(this);
  }

  getUser = id => {
    fetch("http://localhost:800/api/v1/users/" + id)
      .then(response => response.json())
      .then(data => this.setState({ user: data }));
    console.log("testing");
  };

  componentWillMount() {
    this.getUser(this.props.match.params.userId);
    window.state = this.state;
  }

  render() {
    const { user } = this.state;
    return (
      <div>
        <h3>User Details</h3>
        <div class="row">
          <div class="alert alert-light">
            <p>first name: {user.firstName}</p>
            <p>last name: {user.lastName}</p>
            <p>email: {user.email}</p>
            <p>birthday: {user.birthday}</p>
          </div>
        </div>
      </div>
    );
  }
}

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userList: []
    };
  }

  componentWillMount() {
    fetch("http://localhost:8080/api/v1/users")
      .then(response => response.json())
      .then(data => this.setState({ userList: data }));
  }

  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.state.userList.map((user, key) => (
          <ul>
            <li>
              <Link to={`${this.props.match.url}/${user.id}`}>
                {user.firstName} {user.lastName}
              </Link>
            </li>
          </ul>
        ))}
        <Route path={`${this.props.match.url}/:userId`} component={User} />
        <Route
          exact
          path={this.props.match.url}
          render={() => <h3>Select a User!</h3>}
        />
      </div>
    );
  }
}

类用户扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：{}
};
this.getUser=this.getUser.bind（this）；
}
getUser=id=>{
取回（“http://localhost:800/api/v1/users/“+id）
.then（response=>response.json（））
.then（data=>this.setState（{user:data}））；
控制台日志（“测试”）；
};
组件willmount（）{
this.getUser（this.props.match.params.userId）；
window.state=this.state；
}
render（）{
const{user}=this.state；
返回(
用户详细信息
名字：{user.firstName}

姓氏：{user.lastName}

电子邮件：{user.email}

生日：{user.birth}

);
}
}
类UserList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[]
};
}
组件willmount（）{
取回（“http://localhost:8080/api/v1/users")
.then（response=>response.json（））
.then（data=>this.setState（{userList:data}））；
}
render（）{
返回(
使用者
{this.state.userList.map（（用户，键）=>(


{user.firstName}{user.lastName}


))}
选择一个用户！}
/>
);
}
}

componentWillMount

仅在装入组件之前调用，并且当

userId

URL参数更改时，不会装入新的

User

组件

您可以将

组件diddupdate

添加到

用户

组件中，以便在

用户ID

更改时获取新用户

componentDidUpdate(prevProps){
  if (prevProps.match.params.userId !== this.props.match.params.userId) {
    this.getUser(this.props.match.params.userId);
  }
}

---

url会像往常一样更改，但我仍然可以确定组件不会使用从api接收到的新数据进行更新。@anyavay调用的是

componentdiddupdate

？你能在if语句中记录

console.log

吗？现在的问题是，数据在第一次单击和页面加载时不再显示？@anyavay你仍然需要

componentDidMount

和

componentdiddupdate

。