Question

我正在使用Next.js获取网页加载的数据。我正在加载一个markdown文件，并将其解析为一个应该兼容的子组件数组，使用Marksy来响应dom节点。通过使用粗略的以下结构渲染我的compiled(markdown).tree，我看到页面上的正确内容的所有内容似乎都能正常工作：

static async getInitialProps ({query}) {
  const res = await fetch('http://localhost:4000/api/test')
  const json = await res.json()
  return { content: compile(json.data).tree }
}

render () {
  return (
    <div>
      {this.props.content}
    </div>
  )
}

我的数据数组具有以下形状：

[{"type":"h1","key":"0","ref":null,"props":{"children":["Welcome to the Jungle"]},"_owner":null,"_store":{}}]

在半秒钟内，React-Redbox会抛出一个错误，尽管如此：

Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `_class`.

我正在使用react 15.4.2

为什么在成功呈现到页面后出现错误？谢谢！

Answer 1

我们无法直接在object/array内呈现jsx，错误正在解释所有内容，您正在尝试呈现包含以下键的content：

{type, key, ref, props, _owner, _store}

而不是渲染object/array渲染特定值，例如渲染type的{{1}}值：

object

Answer 2

为了安全起见，所有React元素都需要在对象上声明一个额外的$$typeof: Symbol.for('react.element')字段的原因。

添加此属性应解决问题

来源：https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html

成功页面呈现后，对象不是有效组件

2 个答案: