React render inested component

Question

В методе моего реагирующего компонента я хочу проверить функцию async и вернуться только в том случае, если это выполнено. Это мой код:

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


    } 

Но так он дает мне ошибку говоря:

действительный реагировать компонент должен быть возвращен. Вы возвращаете либо массив, либо список или undefined

Я хочу показать данные только после моей логики.

Answer 1

Я предлагаю переместить вызов AJAX на метод жизненного цикла componentDidMount, поэтому запрос запускается, когда узел DOM установлен, а затем условно устанавливает свойство authorised на состояние, зависящее от успешного ответа. Затем используйте эту государственную собственность условно оказывать свои различные состояния пользовательского интерфейса в render метода:

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