Question

在我的react应用程序中，我有一个具有以下结构的数组作为状态：

 data: {
   nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }],
   links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }]
}

数据最初为空。我想做的是使用从mongoDB中检索到的数据来设置数据状态。来自数据库的JSON示例如下：

{
    "_id": {
        "$oid": "5c3a368dfb6fc0600bdedf49"
    },
    "nodes": [
        {
            "id": "root"
        },
        {
            "id": "input"
        },
        {
            "id": "component"
        }
    ],
    "links": [
        {
            "source": "component",
            "target": "root"
        },
        {
            "source": "input",
            "target": "root"
        }
    ]
}

在我的React应用程序的componentDidMount（）中，我正在使用以下代码获取数据

    fetch('link')
    .then(data => json())
    .then((res) => {
      if (!res.success) this.setState({error: res.error});
    else console.log(res.data);
  }
});

最后，这就是我从console.log返回的内容：

[…]

 0: {…}

_id: "5c3a368dfb6fc0600bdedf49"

 links: (2) […]

 0: Object { source: "component", target: "root" }

 1: Object { source: "input", target: "root" }

length: 2

 <prototype>: Array []

 nodes: (3) […]

 0: Object { id: "root" }

 1: Object { id: "input" }

 2: Object { id: "component" }

length: 3

 <prototype>: Array []

 <prototype>: Object { … }

length: 1

因此，我还没有弄清楚如何使用这些数据设置状态并将其置于具有适当结构的数据状态。任何建议都会有所帮助，谢谢！

Answer 1

后端会始终返回links和nodes数组吗？
如果是，您可以这样做：

this.setState({
    data: {
        nodes: res.data.nodes,
        links: res.data.links,
    }
});

如果没有，则必须检查api调用是否返回了节点或链接，并且仅分别针对已返回的数据更新状态。

用来自mongoDB的数据来反应setState

1 个答案: