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> 
    ); 
    } 
}