Início / user-30397416

Isaiah Desrosiers's questions

Martin Hope
Isaiah Desrosiers
Asked: 2025-04-29 04:07:05 +0800 CST
  • 5

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.

javascript