javascript - 页面渲染成功后，对象不是有效组件

Question

我正在使用 Next.js 获取页面加载数据。我正在加载一个 markdown 文件并将其解析为一个子组件数组，这些子组件应该使用 Marksy 与 React 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

All React elements require an additional $$typeof: Symbol.for('react.element') field declared on the object for security reasons.

添加此属性应该可以解决问题

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