Question

目标： 我想将firstName和lastName放在导航栏中。因此，我通过userId

使用id的axios请求

编辑：感谢@Isaac，当我现在使用componentWillUpdate（）时，我不再遇到无限循环了。

问题：当我注销并使用另一个帐户登录时，数据不会更改（firstName和lastName）

服务器没有问题。

此处为图片：说明：我以a和g（firstName和lastName）的身份登录，然后以j和{{1}的身份注销并登录}。

j：

navbar.js

如果有人有解决方案或任何问题，我在这里:) 预先谢谢大家

Answer 1

首先，应避免使用componentWillUpdate生命周期，因为它已被弃用。

对于您的情况，将触发this.getUser();提取数据，然后触发this.setState({client: res.data})。当应用执行this.setState()时，您的组件将被重新渲染，因此不需要任何其他componentLifeCycle。

class NavbarC extends Component {

  state = { client:[], userID: null, token: null };


  componentDidMount(){
    this.setState({ 
      userID: localStorage.getItem("userId"),
      token: localStorage.getItem("token")
    }, () => {
      this.getUser();
    })
  }

  getUser(){
 axios.get (`http://localhost:3002/api/clients/${this.state.userID}?access_token=${this.state.token}`)
    .then(res => {
      this.setState({ client: res.data }, () => {
        console.log(this.state)
      })
    })
  }

  componentDidUpdate(prevProps, prevState){
    if(prevState.userID !== this.state.userID) {
      this.getUser();
    }
  }

  logout = () => this.props.authfn.logout();

  render() {

    return(
      <NavbarV 
        logout = {this.logout}
        firstName={this.state.client.firstName}
        lastName={this.state.client.lastName}
        userId={this.props.userId}
        auth = {this.props.auth}
        classes={this.props.classes} />
    )}
}

Answer 2

我解决了！

这是一个解决方案：

 componentDidMount(){
    this.setState({ 
      userId: localStorage.getItem("userId"),
      token: localStorage.getItem("token")
    }, () => {
      this.getUser();
    })
  }

  getUser = () => {
 axios.get (`http://localhost:3002/api/clients/${this.state.userId}?access_token=${this.state.token}`)
    .then(res => {
      this.setState({ client: res.data, userId: localStorage.getItem("userId") }, () => {
        console.log(this.state)
      })
    })
  }

  componentDidUpdate(prevProps, prevState){
    if(prevState.userId !== this.props.userId) {
      this.setState({ userId: this.props.userId }, () => {
        this.getUser();
      })
    }
  }

注销并使用另一个帐户登录时，在导航栏上更改数据

2 个答案: