I try this code and get an infinite loop
request.jsx
import { useEffect, useState } from 'react';
import axios from 'axios';
export async function getCategories() {
const [categories,setCategories]= useState();
try {
await useEffect(() => {
axios.get("http://localhost:3001/api/req/categories",).then(function (res) {
const response = JSON.stringify(res.data)
setCategories(response);
});
}, [])
return categorias;
} catch (error) {
console.log(error);
}
}
item_new.jsx
import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();
getCategories().then(response => {
try {
const res = JSON.parse(response);
setCategorieSelect(res)
} catch (error) {
console.log(error)
}
console.log(categorieSelect) // infinite loop
})
I also try to put a useEffect and get this error
react-dom.development.js:15408 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.<
import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();
getCategories().then(response => {
try {
useEffect(()=>{
const res = JSON.parse(response);
setCategorieSelect(res)
},[])
} catch (error) {
console.log(error)
}
console.log(categorieSelect) // infinite loop
})
when creating a post. The element is: