[React] Usar forEach e useState de forma sequêncial

Estou tentando fazer um dashboard com o número de alunos e posições dos mesmos em uma escolinha de futebol. Meu objetivo é que apareça um card para cada posição e o número de alunos na posição seja incrementado de acordo com as informações do banco de dados, ficando assim:

Porém, ao invés de agrupar os card e incrementar a quantidade, os cards de repetem no primeiro render e só nos próximos eles começam a agrupar, ficando assim:

O bd ainda não foi implementado, então estou usando o json-server e faço um fetch dentro de um useEffect. Informações do bd.json:

{
"alunos": [
{
"id": 1,
"nome": "João",
"posicao_campo": "7",
"posicao_futsal": "5"
},
{
"id": 2,
"nome": "José",
"posicao_campo": "7",
"posicao_futsal": "3"
},
{
"id": 3,
"nome": "Marcos",
"posicao_campo": "3",
"posicao_futsal": "4"
},
{
"id": 4,
"nome": "Juan",
"posicao_campo": "4",
"posicao_futsal": "4"
}
]


Ao fazer o fetch, chamo a seguinte função:

const conferePosicaoAluno = (alunos) => {
alunos.forEach((aluno) => {
//Confere a posição no campo
switch (aluno.posicao_campo) {
case '1':
addPosicaoCampo('Goleiro');
break;
case '2':
addPosicaoCampo('Zagueiro');
break;
case '3':
addPosicaoCampo('Lateral Direita');
break;
case '4':
addPosicaoCampo('Lateral Esquerda');
break;
case '5':
addPosicaoCampo('Meia');
break;
case '6':
addPosicaoCampo('Volante');
break;
case '7':
addPosicaoCampo('Atacante');
break;
}
// Confere a posição no futsal
switch (aluno.posicao_futsal) {
case '1':
addPosicaoFutsal('Goleiro');
break;
case '2':
addPosicaoFutsal('Fixo');
break;
case '3':
addPosicaoFutsal('Ala Direita');
break;
case '4':
addPosicaoFutsal('Ala Esquerda');
break;
case '5':
addPosicaoFutsal('Pivô');
break;
}
});
};


Na parte do front, estou usando React.js com chakra-ui.

Variáveis:

const [alunos, setAlunos] = useState('');
const [posicoesCampo, setPosicoesCampo] = useState([]);
const [posicoesFutsal, setPosicoesFutsal] = useState([]);


Funções para manipular as informações dos cards:

const addPosicaoCampo = (type) => {
// Verifica se a posição já foi cadastrada no array de posições de campo
let item = posicoesCampo.find((item) => {
return item.type == type;
});

if (item) {
// Caso a posição já exista, adiciona 1 ao valor
let itemIndex = posicoesCampo.indexOf(item);
posicoesCampo[itemIndex].value += 1;
setPosicoesCampo(posicoesCampo);

} else {
// Se não, adiciona uma nova posição com o valor 1
setPosicoesCampo((prevPosicoesCampo) => [...prevPosicoesCampo, { type, value: 1 }]);
}
};

const addPosicaoFutsal = (type) => {
// Verifica se a posição já foi cadastrada no array de posições de futsal
let item = posicoesFutsal.find((item) => {
return item.type == type;
});

if (item) {
// Caso a posição já exista, adiciona 1 ao valor
let itemIndex = posicoesFutsal.indexOf(item);
posicoesFutsal[itemIndex].value += 1;
setPosicoesFutsal(posicoesFutsal);

} else {
// Se não, adiciona uma nova posição com o valor 1
setPosicoesFutsal((prevPosicoesFutsal) => [...prevPosicoesFutsal, { type, value: 1 }]);
}
};


Código de renderização:

return (
<>
<Card icon={FaGraduationCap} title="Alunos Cadastrados" content={alunos.length} />

{posicoesCampo.map((item, i) => {
return (
<Card
key={i}
icon={FaFutbol}
title={`${item.position} (Campo)`}
content={item.amount}
/>
);
})}

{posicoesFutsal.map((item, i) => {
return (
<Card
key={i}
icon={FaRegFutbol}
title={`${item.position} (Futsal)`}
content={item.amount}
/>
);
})}
</>
);


O component Card é apenas para organizar as informações e estilizar elas.

Estou há alguns dias tentando descobrir o motivo, já tentei realizar esse procedimento com um for...of assíncrono, mas também não deu certo. Caso possam ajudar, ficarei muito grato!

Continue reading...