I am trying to make an API call in a functional component which is a react-hook and based on the result, re-render the component's content. Here is the code:
Component which is calling the API-
function IntegrationDownshift() {
render(
<Paper square>
{setResults(inputValue).map(
(suggestion, index) =>
renderSuggestion({
suggestion,
index,
itemProps: getItemProps({
item:
suggestion.userFullName
}),
highlightedIndex,
selectedItem
})
)}
</Paper>
);
}
Here is the setResults
function:
function setResults(textInput) {
const [data, setData] = useState({ users: [] });
searchUser(textInput).then(result => {
useEffect(() => {
searchUser(textInput).then(result => {
setData(result.users);
});
}, []);
});
}
I'm trying to get the state's data and re-render my component based on the data. Here searchUser
is in the action which calls the external API.
searchUser
is calling the action and fetching the data successfully, but I'm not sure why the state is getting updated - I got the below error - React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
I'm new to hooks and any help/pointers will be helpful.
you need to put the first letter in uppercase setResults => SetResults
function SetResults(textInput) {
const [data, setData] = useState({ users: [] });
searchUser(textInput).then(result => {
useEffect(() => {
searchUser(textInput).then(result => {
setData(result.users);
});
}, []);
});
}
function name must start with capital letter. so your function's name is setResults . you have to change it to SetResults.
React functional component names must be start with uppercase letter. If you menipulate the setResults
to SetResults
, then it will work.
And Hooks does't support in regular javascript classes so try to create an other component with the name of SetResults
. And include it in main component
Actually the setResults needs to be capitalized like so
function SetResults(){...} // S capitalized here
Note: If you are not using react hooks then you don't have to capitalize the first letter of the function name, but using hooks expects your function's first letter to be capitalized.
Similar issue is discussed here,
A react function needs to return a renderable JSX to be recognized as React function. You are using "setResults" as a helper function - it is not returning renderable JSX. So the error 'React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks' makes sense.
Refer to this article about how to Fetch Data with useEffort - Author gave an excellent explanation about hooks.
https://daveceddia.com/useeffect-hook-examples/
Try this code
export default function IntegrationDownshift() {
const [data, setData] = useState({ users: [] });
// useEffect method is first called prior to render.
useEffect( () => {
async function searchUser() {
// This will set Data Set and trigger render method
setData(result.users);
}
searchUser();
}, [setData]);
function renderSuggestion(suggestion) {
// Pretty print the suggestion data here
return <div> {suggestion} </div>;
}
return ( <Paper square> {data.map( (suggestion, index) => {
// Render each Suggestion
return renderSuggestion( suggestion);
} )}</Paper>);
}
Hooks basically let you use state and other React class component features in function components. So, call Hooks in a regular JavaScript function is not allowed. You can do it only at the top level of function components or at your custom Hooks.
Think in Hooks like this:
React docs has a section explaining the rules to use hooks:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.