NeoGraph.js:129 Cannot read properties of undefined (reading 'nonFlat')

[xgh127]

My code is as below:

const NeoGraph = props => {
    //定义一个NeoGraph组件，接收props参数
    const {
        containerId, //容器id
        neo4jUri, //neo4jUri 地址
        neo4jUser, //neo4jUser 用户名
        neo4jPassword, //neo4jPassword 密码
        cypherQuery, //cypherQuery 查询语句
    } = props;

    const visRef = useRef(); //创建一个ref对象,用于保存Neo4j对象
    // useEffect 是一个React hook，它可以让你在函数组件中执行一些有副作用的操作，比如获取数据，设置状态，或者订阅一些事件。
    const [subGraphCypher, setSubGraphCypher] = useState(null);
    const [selectedNodeInfo, setSelectedNodeInfo] = useState(null); // 存储选中节点的详细信息

    useEffect(() => {
        try {
            const config = {
                containerId: visRef.current.id,
               neo4j: {
                    serverUrl: neo4jUri,
                    serverUser: neo4jUser,
                    serverPassword: neo4jPassword,
               },
                labels: generateLabelConfigs(),

                relationships: {
                    // "设计施工单位名称": { thickness: 0.1 },
                    // "老青山项目故障": { thickness: 0.1 },
                    "公司": { thickness: 0.1 },

                },
                arrows: true,
                initialCypher: cypherQuery,
            };

            const vis = new Neovis(config.value);
            vis.nonFlat = true;
            if (vis) {
                console.log("NeoVis instance created successfully before render");
                vis.render();

                console.log("NeoVis instance created successfully");
            } else {
                console.log('Neovis instance is undefined');
            }
            vis.render();
            console.log("pwd = " + neo4jPassword+" user = " + neo4jUser + " uri= " + neo4jUri);
            // 添加点击节点的事件监听器
            // vis.registerOnEvent("clickNode", e => {
            //     // e: { nodeId: number; node: Node }
            //     console.log(JSON.stringify(e.node.raw.properties));
            //     setSelectedNodeInfo(e.node.raw.properties);
            //     let name = e.node.raw.properties.name;
            //     console.log("name" + name);
            //     let query = `MATCH p=(a)-[r]->(b) WHERE a.name='${name}' RETURN *`;
            //     setSubGraphCypher(query);
            //
            // });
        } catch (e) {
            console.error(e.message);
            console.log("failed to create NeoVis instance");
        }
    }, [neo4jUri, neo4jUser, neo4jPassword, cypherQuery]);

but it always enter catch(e),report error:NeoGraph.js:129 Cannot read properties of undefined (reading 'nonFlat') I have no idea on how to solve this error.

[thebestnom]

Im pretty sure useEffect runs before the dom is ready, I don't remember what is the correct effect but you have to run the render after the DOM is rendered

[thebestnom]

I think you need to out if(visRef) because you set it to initialize to undefined by default and put in the effect

[thebestnom]

https://stackoverflow.com/questions/58579426/in-useeffect-whats-the-difference-between-providing-no-dependency-array-and-an Maybe Im wrong? Im pretty sure that's the problem though try to console log it

[thebestnom]

Though your error doesn't make any sense, doing anything after new will never be null/undefined

[thebestnom]

(Also the nonFlat should be part of the config, not on the instance itself, it does nothing there)

[thebestnom]

(and it should be new NeoVis(config) without config.value)

[thebestnom]

Ahh, the error is cause you send undefined as config

[xgh127]

Ahh, the error is cause you send undefined as config

I don't understand this reply. If I use new NeoVis(config) without config.value,it reports another error

[thebestnom]

What is the another error?