javascript - React:设置状态之前通过初始渲染触发(通过ajax)

我已经进行了设置，以便HomePage组件为当前登录的用户呈现UserShow。例如，如果一个ID为2的用户登录并访问HomePage页面，它将呈现其UserShow。

“正常” UserShow可以正常工作。例如，如果您键入/ users / 18，它将正确呈现。但是，当HomePage呈现它时，它不起作用。

我是React的新手(尤其是它的生命周期方法)，因此我的调试工作是在各个步骤中引发警报。我想说的最重要的发现是:

currentUserID()正在运行并返回正确的ID

在componentDidMount中硬编码state.userID的值会使事情正常工作

这两点使我相信Render在可以使用其(正确的)返回值更新state.userID之前被调用。更具体地说，它是在this.currentUserID()ajax调用的.success部分返回之前呈现的。如果是这样，那么在这样的ajax调用完成之前不进行初始渲染的最佳方法是什么？

我的代码处于意大利面条状态-这是我第一次使用JavaScript进行前端路由。我还通过使用用户的电子邮件作为localStorage中的 token 来管理 session -我也是JS中的 session 的新手。请多多包涵。

主页组件:

var HomePage = React.createClass({

getInitialState: function(){
    return{
        didFetchData: false,
        userID: null,
    }
},

componentWillMount: function(){
    newState = this.currentUserID()
    this.setState({userID: newState})
    // this.setState({userID: 2})   //hard-coding the value works
},

currentUserID: function(){
    if(App.checkLoggedIn()){
        var email = this.currentUserEmail()
        this.fetchUserID(email)
    }else{
        alert('theres not a logged in user')
    }
},

currentUserEmail: function(){
    return localStorage.getItem('email')
},

fetchUserID: function(email){ //queries a Rails DB using the user's email to return their ID
    $.ajax({
        type: "GET",
        url: "/users/email",
        data: {email: email},
        dataType: 'json',
        success: function(data){
            this.setState({didFetchData: 'true', userID: data.user_id})
        }.bind(this),
        error: function(data){
            alert('error! couldnt fetch user id')
        }
    })
},

render: function(){
    userID = this.state.userID
    return(
        <div>
            <UserShow params={{id: userID}} />
        </div>
    )
}
})

UserShow组件:

var UserShow = React.createClass({

getInitialState: function(){
    return{
        didFetchData: false,
        userName: [],
        userItems: [],
        headerImage: "../users.png"
    }
},

componentDidMount: function(){
    this.fetchData()
},

fetchData: function(){
    var params = this.props.params.id
    $.ajax({
        type: "GET",
        url: "/users/" + params,
        data: "data",
        dataType: 'json',
        success: function(data){
            this.setState({didFetchData: 'true', userName: data.user_name, userItems: data.items, headerImage: data.photo_url})
        }.bind(this),
        error: function(data){
            alert('error! couldnt load user into user show')
        }
    })
},

render: function(){
    var userItem = this.state.userItems.map(function(item){
        return <UserItemCard name={item.name} key={item.id} id={item.id} description={item.description} photo_url={item.photo_url} />
    })
    return(
        <div>
            <Header img_src={this.state.headerImage} />

            <section className="body-wrapper">
                {userItem}
            </section>
        </div>
    )
}
})

最佳答案

因此，您要做的是避免呈现任何内容，直到您的ajax请求返回结果为止。

如果状态是您想要的状态，则可以在render方法中进行检查。如果不是，则返回null，或者返回一个加载器或其他标记。当componentDidMount然后设置状态时，它将触发重新渲染，因为然后设置了userID，它将返回userShow组件

例:

render(){
  if(this.state.userID === null){
     return null; //Or some other replacement component or markup
  }

  return (
    <div>
        <UserShow params={{id: userID}} />
    </div>
  );

}

可以通过以下方式在userShow组件中获取数据:

componentWillReceiveProps(nextProps){
    //fetch data her, you'll find your prop params in nextProps.params
}

您也可以通过在render-method中调用data-fetch来避免这样做。