Reactで複数の中括弧を使用する

Question

コンポーネント呼び出しで動作しているloadData関数を呼び出そうとしています。情報も画面上で正しく表示されます。しかし、{this.loadData（）}をrender（）の中に追加すると、動作しません。

I get Syntax error: C:/Users/jokar38/workspace/react/moviedb/src/App.jsx: Unexpected token, expected , (40:8) 

componentDidMount() { 
     console.log('GrandChild did mount.'); 

     this.loadData() 
    } 
render() { 
     const { data } = this.state; 
     return (
     <ul> 
      // if data not loaded null will render nothing 
      // if data is not null, we iterate data.results with map 
      { data && data.results.map(function (film, index) { 
      // film is an object, just one or more properties to render 
      return <li key={ index }>{ film.display_title }</li>; 
      }) }; 
     </ul> 
     {this.loadData()} <---------- This won't work 
    ); 
    } 

Answer 1

問題は、レンダリングメソッドが単一のルートノードのみを返すことができることです。それでは、あなたが行うことができますすることなどの他の<div>中にあなたの要素をラップすることです。また

componentDidMount() { 
    console.log('GrandChild did mount.'); 
    this.loadData() 
} 

render() { 
    const { data } = this.state; 
    return (
    <div> 
     <ul> 
      { data && data.results.map(function (film, index) { 
       return <li key={ index }>{ film.display_title }</li>; 
      }) }; 
     </ul> 
     {this.loadData()} 
    </div> 
    ); 
} 

あなたはあなたがreturn an array from render methodできた16反応し使用している場合。副次的に、loadData()がコンポーネントを返さない場合は、componentDidMountのような別の場所に置くことをお勧めします。