在 useEffect 中运行 useReadCypher

Question

我正在编写 React 功能组件，应该输入以在 Neo4j 上进行搜索。

我依赖于 useReadCypher 并且无法更改它的内部实现。

我不能在 useEffect 中编写 useReadCypher，因为它违反了钩子规则。

import React, { useState, useEffect, useCallback } from 'react';
import { useReadCypher } from "use-neo4j";

export default function Search() {
const [count, setCount\] = useState(0);
const [runQuery, setRunQuery\] =     useState(false);
const query = `MATCH (n) RETURN n LIMIT ${count}`;
const data = useReadCypher(query);

const handleClick = useCallback(() => {
    setCount(count + 1);
    setRunQuery(true);
}, [count]);

useEffect(() => {
    if (runQuery) {
        console.log('Data changed', data);
        setRunQuery(false);
    }
}, [data, runQuery]);

return (
    <div>
        <p>You clicked {count} times</p>
        <button onClick={handleClick}>
            Click me
        </button>
        {JSON.stringify(data)}
    </div>
);

}

我希望能够单击按钮以使用 useReadCypher 重新运行查询。

解决这个问题的方法应该是什么？

Answer 1

谢谢。

这是解决方案。 这是我的最后一个组成部分。

import React, { useState, useEffect, useCallback } from 'react';
import { useReadCypher } from "use-neo4j";
import {Header} from "semantic-ui-react";
import {StyledDiv, StyledInput} from "./Style";

export default function Search() {
    const [term, setTerm] = useState('');
    const [runQuery, setRunQuery] = useState(false);
    const query = `MATCH (n) RETURN n LIMIT ${term}`;
    const {records, run} = useReadCypher(query);

    const handleClick = useCallback(() => {
        setRunQuery(true);
        run();
    }, [term]);

    useEffect(() => {
        if (runQuery) {
            console.log('Data changed', records);
            setRunQuery(false);
        }
    }, [records, runQuery]);

    return (
        <>
            <Header as='H2' color='blue' textAlign='center' block>Search</Header>
            <StyledDiv>
                <StyledInput
                    value={term}
                    onChange={(e: any) => setTerm(e.target.value)}
                />
                <button onClick={handleClick}>Search</button>
            </StyledDiv>
            <div>
                {JSON.stringify(records)}
            </div>
        </>
    );
}