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

Question

I followed this tutorial to make a react-flow-editor component:

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

Then I adapted it for my project as the above one uses typescript. Below is my code:

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;

When running it, I get the following error:

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.

What am I doing wrong?

Answer 1

Sorry for the late answer. The issue is that you try to render a complex object directly with react.

Try this fix:

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

This should solve the issue.