Javascript 从异步服务器端数据调用呈现ReactJS

我是一个比较新的学生。我真的很喜欢react呈现数据的方式。然而，当我开始使用异步调用来检索和呈现服务器端数据时，我发现有一些奇怪的行为。我有一个组件，它调用一个子组件并呈现服务器端数据

服务器端调用是异步调用。我的代码类似于：

class myComponent extends component {

    constructor(props) {
        super(props);
        this.componentDidMount = this.componentDidMount.bind(this);
        this.state = {myVariable: []};

    }
    this.componentDidMount() {
        fetch() => { server side async call to retrieve data
        this.setState({myVariable: serverData});
    }

    render() {
        <div className="myClass">
            <div className="renderMyBox">
                <div> {this.state.myVariable} </div>
            </div>
        </div>
    }
}

类myComponent扩展组件{
建造师（道具）{
超级（道具）；
this.componentDidMount=this.componentDidMount.bind（this）；
this.state={myVariable:[]}；
}
this.componentDidMount（）{
fetch（）=>{服务器端异步调用以检索数据
this.setState（{myVariable:serverData}）；
}
render（）{
{this.state.myVariable}
}
}

我面临的问题是，前两个div会立即在服务器上呈现，然后会有几乎1秒的延迟，其中有一个空div，然后由于经过的异步调用而设置状态。然后状态的更改会触发重新呈现

---

是否有任何方法可以强制在异步调用成功并设置状态之前不进行渲染？是否有解决方法？

正如elmaister指出的，在有数据之前，您不能返回任何内容。这可以通过观察

isReady

变量来处理：

class myComponent extends component {

  constructor(props) {
    super(props);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.state = { myVariable: [], isReady: false };
  }

  this.componentDidMount() {
    fetch() => { server side async call to retrieve data
      this.setState({
        myVariable: serverData,
        isReady: true
      });
    }

  render() {
    if (this.state.isReady) {
      return <div className="myClass">
        <div className="renderMyBox">
           <div> {this.state.myVariable} </div>
        </div>
      </div>
    }
  }

}

constructor(){
    this.state = {
        data: defaultData,
        loading: true
    };
}
componentDidMount(){
    request.done(data){
       this.setState({
           data: data,
           loading: false,
       })
    }
}
render() {
    if(this.state.loading){
       //return loading style
    }
   ...your code
}

类myComponent扩展组件{
建造师（道具）{
超级（道具）；
this.componentDidMount=this.componentDidMount.bind（this）；
this.state={myVariable:[]，isReady:false}；
}
this.componentDidMount（）{
fetch（）=>{服务器端异步调用以检索数据
这是我的国家({
myVariable:serverData，
伊斯雷迪：是的
});
}
render（）{
如果（此.state.isReady）{
返回
{this.state.myVariable}
}
}
}

您可以在fetch中使用setState，或者使用

jquery.ajax（{async:false}）

如果在请求之前不希望渲染，可以添加以下内容：

render() {
    if(this.state.myVariable.length == 0){
        return null;
    }
   ...your code
}

通常的方法是设置

加载
变量：

class myComponent extends component {

  constructor(props) {
    super(props);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.state = { myVariable: [], isReady: false };
  }

  this.componentDidMount() {
    fetch() => { server side async call to retrieve data
      this.setState({
        myVariable: serverData,
        isReady: true
      });
    }

  render() {
    if (this.state.isReady) {
      return <div className="myClass">
        <div className="renderMyBox">
           <div> {this.state.myVariable} </div>
        </div>
      </div>
    }
  }

}

constructor(){
    this.state = {
        data: defaultData,
        loading: true
    };
}
componentDidMount(){
    request.done(data){
       this.setState({
           data: data,
           loading: false,
       })
    }
}
render() {
    if(this.state.loading){
       //return loading style
    }
   ...your code
}

当
this.state.myVariable
为空时，可以从
render（）
返回null。