Javascript React.js必须返回有效的React元素（或null）

我在

React

方面是新手，我不确定它为什么会导致错误，它抛出了

未捕获错误：SearchBar.render（）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

注意，props.courses是

散列

内部

数组

类对象

[
  {"id": "1", "course_name": "ABC"},
  {"id": "2", "course_name": "EFG"}
]

这是密码

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

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

render（）{
如果（！this.props.courses）
返回(
加载。。。
);
返回(
this.props.courses.map（（课程）=>{
返回(
{课程[“课程名称”]}
)
})
);
}

如果有课程，则返回一个React元素数组。这不起作用，元素数组不是有效的React元素。您可以通过简单地将该数组包装在div元素中来解决这个问题，然后它就可以工作了

如果有课程，则返回一个React元素数组。这不起作用，元素数组不是有效的React元素。您可以通过简单地将该数组包装在div元素中来解决这个问题，然后它就可以工作了

渲染应始终返回单个元素。还需要用

{}

包装.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>
  );
}

render（）{
如果（！this.props.courses）
返回(
加载。。。
);
返回(
{this.props.courses.map（（课程）=>{
返回(
{课程[“课程名称”]}
)
})}
);
}

渲染应始终返回单个元素。还需要用

{}

包装.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>
  );
}

render（）{
如果（！this.props.courses）
返回(
加载。。。
);
返回(
{this.props.courses.map（（课程）=>{
返回(
{课程[“课程名称”]}
)
})}
);
}