Javascript 未捕获错误：对象作为子对象无效。使用反应流编辑器时

我按照本教程制作了一个react flow editor组件：

然后我将其应用于我的项目，因为上面的项目使用了typescript。下面是我的代码：

import { Config, Editor, Node } from 'react-flow-editor';
import React, { Component } from 'react';

class Workflow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      nodes: [
          {
            id: 'Node 1',
            name: 'First Node',
            payload: { h1: 'hello' },
            inputs: [{
              connection: [], name: 'input 1'
            }],
            outputs: []
          }],
      config: {
        resolver: function(payload) {
          if ( payload.type === '') return <h2 />;
          return (
            <p>{payload}</p>
          );
        },
        connectionType: 'bezier',
        grid: true,
        demoMode: true,
      }
    };
  }

  render() {
    return (
      <div>
        <Editor config={this.state.config} nodes={this.state.nodes} />
      </div>
    );
  }

}

export default Workflow;

从'react flow Editor'导入{Config，Editor，Node}；
从“React”导入React，{Component}；
类工作流扩展组件{
建造师（道具）{
超级（道具）；
此.state={
节点：[
{
id:'节点1'，
名称：“第一个节点”，
有效负载：{h1:'你好'}，
投入：[{
连接：[]，名称：“输入1”
}],
产出：[]
}],
配置：{
分解器：功能（有效负载）{
if（payload.type==''）返回；
返回(
{payload}

);
},
连接类型：“bezier”，
网格：是的，
demoMode：没错，
}
};
}
render（）{
返回(
);
}
}
导出默认工作流；

运行它时，我得到以下错误：

Uncaught错误：对象作为React子对象无效（找到：具有键{id，name，payload，inputs，outputs}的对象）。如果要呈现子对象集合，请改用数组。

我做错了什么？

很抱歉回答得太晚了。 问题是，您试图使用react直接渲染复杂对象

尝试此修复程序：

- <p>{payload}</p>
+ <p>{payload.payload.h1}</p>

-{payload}

+{payload.payload.h1}

---

这应该可以解决问题。

评论不用于进一步讨论；这段对话已经结束。