在 useEffect 中运行 useReadCypher

Question

I'm writing React functional component that should be input for search on Neo4j.

I'm dependant on the useReadCypher and cannot change it's inner implementation.

I cannot write the useReadCypher inside the useEffect because it's break the rule of hooks.

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>
);

}

I want to be able to click on the button to rerun the query using the useReadCypher.

What should be the approach to solving this issue?

Answer 1

Thank you.

It was the solution. Here is my final component.

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>
        </>
    );
}