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

【问题标题】：React throwing Error: Objects are not valid as a React childReact 抛出错误：对象作为 React 子对象无效
【发布时间】：2021-08-05 20:43:08
【问题描述】：

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

× 错误：对象作为 React 子对象无效（找到：对象带有键 {id、label、title}）。如果您打算渲染一组子项，请改用数组。

我不确定为什么它不适用于我的网络图对象，但对于我正在以相同方式创建和发送的其他对象却完全正常。

我的烧瓶对象：

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']);
        })
      }, [])

任何帮助将不胜感激

【问题讨论】：

标签： javascript python reactjs flask flask-restful

【解决方案1】：

我找到了我的问题。它与另一个组件有关，我在调试它时尝试直接渲染节点对象。

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

import React from 'react';

function NetworkGraphComponent({nodes, edges}) {

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

export default NetworkGraphComponent

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

【讨论】：