React - 'react-d3-graph' 不呈现图表组件答案

【问题标题】：React - 'react-d3-graph' not rendering Chart componentReact - 'react-d3-graph' 不呈现图表组件
【发布时间】：2021-11-30 09:53:51
【问题描述】：

我以“react-d3-graph”为例：

https://codesandbox.io/s/long-wood-7evr8?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:138-417

我正在尝试通过使用 fetch 从文件中读取数据来呈现“react-d3-graph”中的 Graph 组件，以处理非硬编码数据。

但是当我通过 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

【问题讨论】：

看起来您没有从 fetch("http://10.10.1.185:4200/chartdata.txt") 获取数据。 console.log("text=" + text);时你看到了什么
text=[{ 节点：[{ id：“Harry”}，{ id：“Sally”}，{ id：“Alice”}，{ id：“Bob”}，]，链接：[{来源：“哈利”，目标：“莎莉”}，{来源：“哈利”，目标：“爱丽丝”}，{来源：“爱丽丝”，目标：“鲍勃”}，]，}]跨度>
你解析数据了吗？ r.text() 假设它是一个字符串。如果你没有解析，用 JSON.parse() 解析响应
就在你看到数据的地方text=[{ nodes: [{ id: "Harry" }, { id: "Sally" }, ...]设置状态。确保它不是字符串化的值。如果是，先解析再存储
解决了你的问题吗？

标签： javascript reactjs d3.js

【解决方案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)
 })

【讨论】：

如果这能解决您的问题，请告诉我。（标记为 ✓ 已接受）
我在 Graph 组件中使用 'data' 所以你的意思是说 try this.setState({ data : text }) 这个错误：TypeError: Cannot read properties of undefined (reading '地图')