React抛出错误：对象作为React子对象无效

Question

我目前正在尝试将网络图从flask应用程序传递到react应用程序，我在前端遇到了一个问题，我试图从后端加载json数据并将其存储在react状态，但它一直抛出错误：

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

我不知道为什么它不适用于我的网络图对象，但适用于以相同方式创建和发送的其他对象

我的烧瓶对象：

class NetworkNode:
def __init__(self, id, label, title):
    self.id = id
    self.label = label
    self.title = title

def info(self):
    return {
        "id": self.id,
        "label": self.label,
        "title": self.title
    }

class NetworkGraph:
def __init__(self):
    self.nodes = []
    self.edges = []

def add_node(self, node):
    self.nodes.append(node)

def add_edge(self, edge):
    self.edges.append(edge)

def load(self, storage_vessels, pumps, reactors):
    for sv in storage_vessels:
        network_node = NetworkNode(id=sv.id, label=sv.id, title="")
        self.add_node(network_node)
    for p in pumps:
        network_node = NetworkNode(id=p.id, label=p.id, title="")
        self.add_node(network_node)
    for r in reactors:
        network_node = NetworkNode(id=r.id, label=r.id, title="")
        self.add_node(network_node)

def info(self):
    return {
        'Nodes': [node.info() for node in self.nodes],
        'Edges': self.edges,
    }

API视图：

@app.route('/api/network-graph')
def network_graph():
    network_graph = NetworkGraph()
    network_graph.load(system.storage_vessels, system.pumps, system.reactors)    

    return {
        'Network_Graph': network_graph.info(),
    }

发生错误的位置（在“节点”行抛出错误）：

 useEffect(() => {
        axios.get('http://localhost:5000/api/network-graph')
        .then((response) => {
          console.log(response.data)
          setNodes(response.data['Network_Graph']['Nodes']);
          setEdges(response.data['Network_Graph']['Edges']);
        })
      }, [])

任何帮助都将不胜感激

Answer 1

我发现了我的问题。它与另一个组件相关，在调试节点对象时，我试图直接渲染该组件

引发错误的组件如下所示：

import React from 'react';

function NetworkGraphComponent({nodes, edges}) {

    return (
        <div>
            {nodes}
            {edges}
        </div>
    )
}

export default NetworkGraphComponent

在我注释掉{nodes}行的那一刻，它就工作了。愚蠢的我忘记了我仍然在那里加载值来检查它是否工作lol