反应 - 'react-d3-graph'不渲染图表组件

Question

我以'react-d3-graph'为例:

https://codesandbox.io/s/long-wood-7evr8?fontsize=14& hidenavigation = 1,主题= dark&文件=/src/App.js: 138 - 417

我试图在'react-d3-graph'中呈现图形组件，通过使用fetch从文件读取数据来处理非硬编码数据。

但是当我通过fetch()从文件中读取数据并将从文件中读取的数据分配给组件时，我在控制台中得到这些消息，并且没有显示任何内容。

react-d3-graph:: Graph:您没有为react-d3-graph提供足够的数据来呈现某些内容。您需要提供至少一个节点

react-d3-graph:: Graph::您正在向react-d3-graph传递无效数据。你必须在传递给组件的数据对象中包含一个links数组，即使它是空的。

此消息显示在从文件中读取的数据的控制台输出之前，因此这是一个定时问题。我试着四处阅读，但找不到解决办法。

有谁能帮忙吗?谢谢。

import React, { Component } from 'react'
import { Graph } from "react-d3-graph";
class GraphView extends Component {

constructor(props) {
super(props)
this.state = {
data : {}
}
}
componentDidMount() {
fetch("http://10.10.1.185:4200/chartdata.txt")
.then((r) => r.text())
.then(text => {
console.log("text=" + text);
this.state.data = text
console.log("this.state.data=" + this.state.data)
})
}
render() {
const myConfig = {
nodeHighlightBehavior: true,
node: {
color: "lightgreen",
size: 200,
highlightStrokeColor: "blue",
},
link: {
highlightColor: "lightblue",
},
};
const onClickNode = function (nodeId) {
window.alert(`Clicked node ${nodeId}`);
};
const onClickLink = function (source, target) {
window.alert(`Clicked link between ${source} and ${target}`);
};
const onMouseOverNode = function (nodeId, node) {
window.alert(`Alarms for ${nodeId}  Coords: (${node.x}, ${node.y})`);
};

const onRightClickNode = function (event, nodeId) {
const clickedNode = { nodeId };
window.alert(`onRightClickNode link  ${event} and ${nodeId}`);
};

return (
<div>

<Graph
id="graph-id" 
data={this.state.data}
config={myConfig}
onClickNode={onClickNode}
onClickLink={onClickLink}
onRightClickNode={onRightClickNode}                
/>;
</div>
);
}
}
export default GraphView

Answer 1

因为您直接操纵状态而不是使用setState。在反应必须从未直接操作状态。所以改变

.then(text => {
console.log("text=" + text);
this.state.data = text
console.log("this.state.data=" + this.state.data)
})

:

.then(text => {
console.log("text=" + text);
this.setState({data: text})
console.log("this.state.data=" + this.state.data)
})