Boa tarde. Estou tendo problemas em encontrar uma solução. Quando faço minha requisição via FETCH e printo na tela com o console.log, aparecem dois arrays de objetos em vez de um só. Segue o print na tela: inserir a descrição da imagem aqui
Aqui está o código em que realizo o Fetch. Na verdade estava me retornando milhares de resultados, mas estudando vi que eu tinha que usar o useEffect, pois se eu usar só o useState, por causa dele querer sempre se atualizar, ele ficava fazendo várias requisições. Usei o useEffect e resolveu parcialmente o problema, pois ainda estou tendo dois resultados em vez de um só.
import './ProjectForm.module.css';
import MeuInput from '../form/Input';
import MeuSelect from '../form/Select';
import Submit from '../form/Submit';
import {useEffect, useState} from 'react';
function ProjectForm({btnText}){
const [categories, setCategories] = useState([]);
useEffect(()=>{
fetch('http://localhost:5000/categories',{
method: 'GET',
headers: {'Content-Type': 'application/json'},
})
.then((resp) => {
if(resp.ok) return resp.json();
else throw new Error("Erro!");
})
.then((data) => {
setCategories(data);
console.log(data);
})
.catch((err) => console.log(err))
},[]);
return(
<form>
<MeuInput type="text" placeholder="Insira o nome do projeto" name='projeto' text='Projeto'/>
<MeuInput type="number" placeholder="Insira o orçamento total" text='Orçamento' name='budget'/>
<MeuSelect text="Categoria" name="category_id" options={categories}/>
<Submit name="submit" value={btnText}/>
</form>
);
}
export default ProjectForm;
Aqui está o meu Json (localhost:5000/categories) que estou pegando via Fetch:
{
"projects": [],
"categories":[
{
"id": 1,
"name": "Infra"
},
{
"id": 2,
"name": "Desenvolvimento"
},
{
"id": 4,
"name": "Design"
},
{
"id": 5,
"name": "Planejamento"
}
]
}