Estou usando useEffectpara buscar dados. Esses dados são passados para um estado e, em seguida, usados como prop para um componente renderizar/preencher adequadamente. Aqui está o código que funciona:
const [projects, setProjects] = useState([]);
useEffect(() => {
const q = query(collection(db, "projects"), orderBy("update", "desc"));
const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
const fetched = [];
QuerySnapshot.forEach((doc) => {
fetched.push({ ...doc.data(), id: doc.id });
});
const sortedProjects = fetched.sort((a, b) => a.update - b.update);
setProjects(sortedProjects);
});
return () => unsubscribe;
}, []);
O código acima busca os dados corretamente e os passa para um componente que, por sua vez, usa o map para exibir uma lista dos projetos. Para simplificar, eu queria ver se conseguiria fazer o mesmo com os dados do currículo. Aqui está o código para isso:
const [edu, setEducation] = useState([]);
useEffect(() => {
const q = query(
collection(db, "resume/resume/education"),
orderBy("startDate")
);
const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
const fetched = [];
QuerySnapshot.forEach((doc) => {
fetched.push({ ...doc.data(), id: doc.id });
});
const sortedEdu = fetched.sort(
(a, b) => a.startDate.nanoseconds - b.startDate.nanoseconds
);
setEducation(sortedEdu);
});
return () => unsubscribe;
}, []);
Este, por algum motivo, não funciona. Verifiquei se os dados estão sendo recuperados (e estão), e o useEffecte useStateparecem estar funcionando como deveriam. Até adicionei um login no componente e, de fato, os dados aparecem dessa extremidade, mas ainda estou recebendo um erro de mapa, dizendo que o array está indefinido e impedindo a renderização do React. Também sei que esses componentes funcionam quando tento inserir dados diretamente. O que pode estar acontecendo para causar isso?
Eu literalmente copiei e colei os valores e, em seguida, ajustei, e ainda tenho o mesmo problema. Para esclarecer, aqui está o componente em questão:
export const ResumeItemLister = ({ items, sectionTitle }) => {
return (
<div>
<h2 className="text-xl text-left">{sectionTitle}</h2>
<hr />
<table>
{items.map(({ title, location, date, bullets }) => (
<tr className="pt-10">
<div className="grid grid-cols-3">
<td className="text-left">{date}</td>
<td className="col-span-2">
<div className="text-left">
{title ? (
<p>
<bold className="font-bold">{title}</bold>, {location}
</p>
) : (
<p>{location}</p>
)}
<ul>
{bullets.map((text) => (
<li className="list-disc list-inside"> {text}</li>
))}
</ul>
</div>
<br />
</td>
</div>
</tr>
))}
</table>
</div>
);
};
Isso funciona, desde que eu defina explicitamente os itens no componente pai. Usando o estado obtido, no entanto, obtenho:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
Entendo que isso significa que itens não estão definidos, mas, como mencionado, não é o caso. Qualquer ajuda é muito apreciada.
