Saya punya kode seperti ini di bawah ini dan pertanyaan saya adalah apa yang dapat saya lakukan untuk mendapatkan produk yang diambil sebelum komponen diterjemahkan? Maksud saya dalam komponen panel saya saya memiliki fungsi .map yang menunjukkan kesalahan "tidak dapat membaca properti 'Peta' dari undefined" karena produk tidak cukup cepat.

const Announcments = () => {
  const [announcements, setAnnouncement] = useState([]);

  useEffect(() => {
    const getProducts = async () => {
      const res = await fetch("http://localhost:8000/api/products", {
        method: "GET",
      });
      const data = await res.json();
      await setAnnouncement(data);
    };
    getProducts();
  }, []);

  return (
    <div className="announcments">
      <TopNav results={announcements.length} />
      <Panel announcements={announcements} />
      <div className="down-pages-list">
        <PagesList />
      </div>
    </div>
  );
};

Fungsi .MAP:

{announcements.results.map((announcement) => (
          <SingleAnnoun
            price={announcement.price}
            title={announcement.name}
            photo={getPhoto(announcement.images[0].file_name)}
          />
        ))}
1
MAXIM 7 29 Mei 2021, 00:18

1 menjawab

Jawaban Terbaik

Isu

Masalahnya di sini bukan bahwa "produk tidak cukup cepat" tetapi alih-alih bahwa keadaan awal Anda tidak cocok dengan apa yang Anda coba render pada render awal. Yaitu. announcements Awalnya array kosong ([]) tetapi Anda mencoba untuk memetakan announcements.results yang jelas tidak terdefinisi.

Larutan

Gunakan keadaan awal yang valid sehingga ada sesuatu yang awalnya diberikan.

const [announcements, setAnnouncement] = useState({ results: [] });

Sekarang announcements.results didefinisikan dan mappable.

Ini juga mengasumsikan, tentu saja, pembaruan status setAnnouncement(data); Anda juga benar. I.E. bahwa json data adalah objek dengan properti results yang merupakan array.

Btw, setAnnouncement adalah fungsi sinkron sehingga tidak ada apa-apa untuk await untuk.

1
Drew Reese 28 Mei 2021, 21:32