plain-purple
plain-purple3mo 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
vicious-gold
vicious-gold3mo 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>
)
}