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

Question

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

https://www.npmjs.com/package/react-flow-editor

然后我将它改编为我的项目，因为上面使用了打字稿。以下是我的代码：

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;

运行时出现如下错误：

Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name, payload, inputs, outputs}). If you meant to render a collection of children, use an array instead.

我做错了什么？

Answer 1

抱歉回复晚了。 问题是您尝试使用 react 直接渲染复杂对象。

试试这个修复：

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

这应该可以解决问题。