未捕獲的錯誤：對象作為 React 子項無效。 使用反應流編輯器時

Question

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

https://www.npmjs.com/package/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;

運行它時，我收到以下錯誤：

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 直接渲染復雜的 object。

試試這個修復：

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

這應該可以解決問題。