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

或者，如果你使用 React 16 ，你可以return an array from render method。另外，如果loadData()没有返回任何组件，我建议您将其放在其他地方，例如componentDidMount。

在React中使用多个花括号

1 个答案: