UI dalam Reactjs tidak dikemas kini

Question

Saya sedang belajar React dan mengambil beberapa asas, jadi gunakan pengetahuan itu untuk membuat projek asas ini. Saya sedang membuat apl penjimatan nota ringkas menggunakan React dan Firebase. Pemindahan data ke pangkalan data Firebase dengan sempurna. mendapatkan semula data. Masalah yang saya hadapi ialah data yang diambil tidak dikemas kini dalam UI. import{useEffect,useState}from'react';import{AiFillCaretUp}from'react-icons/ai';im

P粉276064178 · Answer

Salah satu cara ialah menulis seperti ini:

useEffect(() => {
    let notesData = [];
    const fetchNote = async () => {
      const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
      const data = await response.json();
      for (const key in data) {
        notesData.push({ id: key, title: data[key].title, note: data[key].note });
      }
      setData(notesData); // 在这里数据已经准备好了
    };
    fetchNote();
  }, []);

fetchNote 是一个异步函数，所以它需要一些时间来完成任务并获取数据。因此，你应该等待数据准备好，不幸的是，当你在调用 fetchNote() 后立即使用 setData(notesData) Data belum siap lagi.

Sebagai alternatif anda boleh mengembalikan data di dalam fungsi async dan secara automatik mengembalikan janji lain yang menyelesaikan kepada data yang diperlukan, dan kemudian anda boleh mengemas kini data anda:

useEffect(() => {
    let notesData = [];
    const fetchNote = async () => {
      const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
      const data = await response.json();
      for (const key in data) {
        notesData.push({ id: key, title: data[key].title, note: data[key].note });
      }
      return notesData; // 返回一个解析为 'notesData' 的 promise
    };

    fetchNote()
      .then((updatedData) => {
        setData(updatedData);
      })
  }, []);