Question

因此，我在AppRouter.js（这是我的最高组件）中管理用户身份验证。

这是它的工作方式：

componentDidMount() {
  this.getUser()
}

getUser(history = undefined) {
  const { cookies } = this.props
  let jwt = cookies.get(this.state.cookieName)
  if (!jwt) return null

  AuthApi.getCurrentUser(jwt).then(response => {
    if (response !== undefined) {
      this.setState({
        email: response.email,
        userId: response.id,
        firstName: response.first_name,
        lastName: response.last_name,
        phoneNumber: response.phone_number,
        randomString: response.random_string,
        jwt: jwt
      })
      if (history) history.push('/')
    }
    else {
      // user has cookie but cannot load current user
      cookies.remove(this.state.cookieName)
      this.setState({
        email: undefined,
        firstName: undefined,
        lastName: undefined,
        phoneNumber: undefined,
        randomString: undefined,
        jwt: undefined,
        userId: undefined
      })
    }
  })
}

我的问题是，我还在子组件中调用了componentDidMount()，那里的代码取决于我的AppRouter的{{1}}输出的结果。

以下是我的componentDidMount()组件接收MyOrdersPage.js的状态作为道具的示例：

AppRouter

但是，componentDidMount() { axios.get('/api/v1/orders/' + this.props.currentUser.userId) .then(response => { console.log(response) this.setState({ orders: response.data }) }) .catch(error => console.log(error)) }的{{1}}在AppRouter的{{1}}之后完成加载。因此，当componentDidMount()的{{1}}运行时，MyOrdersPage.js是componentDidMount()。

如何更改代码，以便仅在将this.props.currentUser.userId加载到undefined中时才从子组件加载MyOrdersPage.js？

Answer 1

正如@skyboyer在评论中提到的，我向父组件添加了状态isReady，默认情况下设置为false。 API调用加载完成后，它将变为true：

AuthApi.getCurrentUser(jwt).then(response => {
    if (response !== undefined) {
      // do something
    }
    else {
      // do someting else 
    }
  }).then(() => this.setState({isReady: true}));

在render()方法中：

{this.state.isReady &&
        <div>...</div>}

此外，实施react-loads也是一个好主意。

等待ComponentDidMount完成ReactJS中最高组件的加载

1 个答案: