適切な状態を受け取る前に反応コンポーネントをマウントする

Question

getリクエストからいくつかのデータを受信し、それを別のコンポーネントに送信する必要があります。

しかし、必要な状態を受け取る前に他のコンポーネントをレンダリングしようとしているようです。ここでは、現在のコードは次のとおりです。ここで

class App extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      logList:[], 

     }; 

    } 

    componentWillMount(){ 
     var me=this; 
     var logDirs, currentDirectory; 
     const request = axios.get(baseUrl+"/logs") 
      .then(function(response){ 
       logDirs = response.data.logdirs; 
       currentDirectory = logDirs[me.props.directory]; 
       axios.get(currentDirectory.name) 
        .then(function(response){ 
         me.setState({ 
          logList: response.data.logs 
         }); 

        }); 

     }); 

    } 

    renderLogDirectories(){ 
     if (this.state.logList.length>0){ 
      return (<LogDirectories logs={this.state.logList}/>); 
     } 
    } 

    render(){ 
     if(this.state.logList.length>0) 
      return (
       <div> 
          {this.renderLogDirectories()} 
       </div> 
      ); 

    } 
} 

は小道具を受信する必要があるコンポーネントです：

class LogList extends Component{ 

    render(){ 
     var me = this; 

     return (
      <ListGroup> 
       <ListGroupItem 
        bsStyle="success">{this.props.directory}</ListGroupItem> 
        {(this.props.logs).map(function (logList, key) { 
         return (
          <Link><ListGroupItem key={key}> 
           {logList} 
          </ListGroupItem></Link>); 
        })} 
      </ListGroup> 
     ); 
    } 
} 

だから、どのような変更が、私はこの作業を取得することができますか？

それが今であるので、私は取得していますエラーは以下のとおりです。

Uncaught Invariant Violation: App.render(): A valid React element (or null) must be returned.

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null (...)

Answer 1

何がロードされない場合は、エラーが言うようにあなたは、有効な要素を返す必要があります。

render(){ 
    if(this.state.logList.length>0) { 
     return (
      <div> 
       {this.renderLogDirectories()} 
      </div> 
     ); 
    } 
    return (<div>Loading</div>); 

}