React.js有效的做出反應元素（或空）必須返回

Question

我在React是新的，我不知道爲什麼它會導致錯誤，把它扔到

Uncaught Error: SearchBar.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

注意的是，props.courses是hash內部array對象像

​​3210

下面是代碼

render() { 
    if (!this.props.courses) 
    return (
     <div className=""> 
     Loading... 
     </div> 
    ); 

    return (
    this.props.courses.map((course) => { 
     return (
     <div> {course["course_name"]} </div> 
    ) 
    }) 
); 
} 

Answer 1

渲染應該總是返回單個元素。你也需要用{}來包裝你的.map函數。

render() { 
    if (!this.props.courses) 
    return (
     <div className=""> 
     Loading... 
     </div> 
    ); 

    return (
    <div> 
     {this.props.courses.map((course) => { 
     return (
      <div> {course["course_name"]} </div> 
     ) 
     })} 
    </div> 
); 
} 

Answer 2

如果有課程，則返回一組React元素。這不起作用，元素數組不是有效的React元素。你可以通過簡單地將該數組包裝在一個div元素中來解決這個問題，然後它就可以工作。