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

Question

我正在使用 Next.js. I'm loading a markdown file and parsing it into an array of child components that should be compatible react dom nodes using Marksy 为页面加载获取数据。通过使用以下粗略的结构呈现我的 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

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

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

而不是渲染 object/array 渲染特定值，例如渲染 type 那个 object 的值：

render () {
   return (
     <div>
       {this.props.content[0].type}
     </div>
   )
}

Answer 2

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

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

Objects are not valid components after successful page render

javascript

reactjs

react-dom

next.js