React에서 여러 중괄호 사용

Question

구성 요소 호출에서 작동하는 loadData 함수를 호출하려고합니다. 정보는 화면에서 올바르게 렌더링됩니다. 하지만 render {) 내부에 {this.loadData()}를 추가하면 작동하지 않습니다.

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과 같은 곳에 넣어 두는 것이 좋습니다.