Question

我是React的新手，我不确定为什么会导致错误，它会抛出

未捕获错误：SearchBar.render（）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象

请注意，props.courses是hash内部array对象，如

[
  {"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>
      )
    })
  );
}

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元素中来解决这个问题，然后它就可以了。

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

2 个答案: