conscious-sapphire•10mo ago

Another question - one that seems like

Another question - one that seems like it should be way simpler. I'm trying to create a component that will send a custom query up to my backend server every time the user performs a search on an ant design <Search> field. But I'm running into an error currently of "Invalid hook call. Hooks can only be called inside the body of a function". Code is below:

import { useCustom, useOne } from "@refinedev/core"
import { Col, Input, Row } from "antd"
import { API_BASE_URL } from "../../providers";

const { Search } = Input;

export const Home = () => {

    const spotlightSearch = (value) => {
        const { data, isLoading } = useCustom({
            url: `${API_BASE_URL}/spotlight`,
            method: 'post',
            config: {
                payload: value
            }
        });
        console.log(data);
    };

    return (
        <div>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24}>
                    <Search name="searchFun" placeholder="Provide a search term..." enterButton="Search" size="large" onSearch={(value, event) => {
                        spotlightSearch(value);
                    }} />
                </Col>
            </Row>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24} style={{ marginTop: '32px' }}>
                    <div id="spotlightResults"></div>
                </Col>
            </Row>
        </div>
    )
}

import { useCustom, useOne } from "@refinedev/core"
import { Col, Input, Row } from "antd"
import { API_BASE_URL } from "../../providers";

const { Search } = Input;

export const Home = () => {

    const spotlightSearch = (value) => {
        const { data, isLoading } = useCustom({
            url: `${API_BASE_URL}/spotlight`,
            method: 'post',
            config: {
                payload: value
            }
        });
        console.log(data);
    };

    return (
        <div>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24}>
                    <Search name="searchFun" placeholder="Provide a search term..." enterButton="Search" size="large" onSearch={(value, event) => {
                        spotlightSearch(value);
                    }} />
                </Col>
            </Row>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24} style={{ marginTop: '32px' }}>
                    <div id="spotlightResults"></div>
                </Col>
            </Row>
        </div>
    )
}

1 Reply

sensitive-blue•10mo ago

Hello @MesbearizingMeat, This is basic rules of react. You can't call hooks inside function, you should call hooks from React component you can use refetch function: code should be similar like this but I suggest you look at the fundamentals of react

export const Home = () => {
   const { data, isLoading, refetch } = useCustom({
            url: `${API_BASE_URL}/spotlight`,
            method: 'post',
            config: {
                payload: value
            }
        });

    const spotlightSearch = (value) => {
         refetch()
    };

   console.log(data);

    return (
        <div>

        </div>
    )
}

export const Home = () => {
   const { data, isLoading, refetch } = useCustom({
            url: `${API_BASE_URL}/spotlight`,
            method: 'post',
            config: {
                payload: value
            }
        });

    const spotlightSearch = (value) => {
         refetch()
    };

   console.log(data);

    return (
        <div>

        </div>
    )
}