React渲染嵌套组件

Question

在我的反应组件的return方法中，我想检查异步函数，只有在满足时才返回。这是我的代码：

render() { 
     var data = new MyClass() 
     data.helper(function(response){ 
     if(response.status === "authorised"){ 
      return (
       <div> 
       <List videos={videos}/> 
      </div> 
      ) 

      }else{ 
      return (
       <div> 
       <p>Please wait</p> 
      </div> 
      ) 
      } 
     }) 


    } 

但是这样一来它给我错误说：

有效的反应成分必须归还。您正在返回阵列或列表或未定义

我想仅在我的逻辑后显示数据。

Answer 1

我建议将AJAX调用移至componentDidMount生命周期方法，以便在装入DOM节点时触发请求，然后根据成功的响应有条件地设置authorised属性。为了使用`

class MyComponent extends React.Component { 
    constructor() { 
    super(); 

    this.state = { authorised: false }; 
    } 

    componentDidMount() { 
    var data = new MyClass(); 
    data.helper((response) => { 
     if (response.status === "authorised") { 
     this.setState({ authorised: true }) 
     } 
    }); 
    } 

    render() { 
    if (this.props.authorised) { 
     return (
     <div> 
      <List videos={videos}/> 
     </div> 
    ); 
    } 
    return (
     <div> 
     <p>Please wait</p> 
     </div> 
    ); 
    } 
}