0
I have a form, which has two related fields, a group and a subgroup, so when I upload the data from the api to popular the screen, I get all the groups and all the subgroups, stored in a state and step for the DOM render, Is there any way to use information I received from the uploaded data, in case the group(a group_id) to filter the second Answer before loading the screen? because when I try, the DOM sees the filtrates as Undefined
Follow the example code
const [grupo, setGrupo] = useState([]);
const [subGrupo, setSubGrupo] = useState([]);
const [subGrupoFilter, setSubgrupoFilter] = useState([]);
const [metaPessoa,setMetaPessoa] = useState();
async function groupHandler() {
await api
.get("/pessoasgrupos", { headers: { token: isAuth().token_lg } })
.then((response) => {
setGrupo(response.data);
});
}
async function subgroupHandler() {
await api
.get("/pessoassubgrupos", {
headers: { token: isAuth().token_lg },
})
.then((response) => {
setSubGrupo(response.data);
setSubgrupoFilter(
response.data.map((sg) => sg.cod_grupoowner === metaPessoa.cod_grupo)
);
});
}
useEffect(() => {
if (!metaPessoa) {
if (pessoa) {
api
.get("/pessoa", {
params: { codigo: pessoa, somenteclientes: false },
headers: { token: isAuth().token_lg },
})
.then((response) => {
if (response.statusText == "OK") {
setMetaPessoa(response.data);
} else {
alert("Error");
}
});
}
groupHandler()
subgroupHandler()
}
}, []);
When filter, and I try to render the result in the DOM, it only shows Undefined, although if I change something in the code and save, the Reload of the active React, and it ceases to be Undefined and receives the values. What would be the best way to work this filter?
There’s no way to test your code, but you tried to pass
metaPessoa
for the Istener ofuseEffect
? I don’t know if it goes into infinite loop, but I’m thinking about how to understand the problem.– Cmte Cardeal
It would be interesting, but the metaPeople there in the context is the datasource of the page’s main form
– Kai