UI dalam Reactjs tidak dikemas kini

Question

Saya sedang belajar React dan mempelajari beberapa asas, jadi saya menggunakan pengetahuan ini untuk membuat projek asas ini. Saya sedang membuat apl penjimatan nota ringkas menggunakan React dan Firebase.

Pemindahan data ke pangkalan data Firebase dengan sempurna.

Dapatkan data.

Masalah yang saya hadapi ialah data yang diambil tidak dikemas kini dalam UI.

<code>import { useEffect, useState } daripada 'react';
import { AiFillCaretUp } daripada 'react-icons/ai';
import './Card.css';

eksport fungsi lalai Kad(props) {
  const [showPara, setShowPara] = useState(false);
  const [data, setData] = useState([]);
  console.log('kad dalam');

  useEffect(() => {
    biarkan notaData = [];
    console.log('di dalam UseEffect');
    const fetchNote = async () =>
      respons const = tunggu fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
      data const = menunggu respons.json();
      for (const key in data) {
        notesData.push({ id: key, title: data[key].title, note: data[key].note });
      }
    };
    fetchNote();
    // console.log(notesData);
    setData(notesData);
  }, []);

  const toggleHandler = () =>
    setShowPara((preVal) => !preVal);
  };

  const paraClass = showPara ?
  const rotate = showPara ?
  kembali (
    <div className='container'>
      {console.log('bekas kad dalam', data)}

      {data.map((kad) => (
        <div className='card' key={card.id}>
          <div className='card-title' onClick={toggleHandler}>
            <h3>{card.title}</h3>
            <AiFillCaretUp className={rotate} />
          </div>
          <div className={paraClass}>
            <p>{card.note}</p>
          </div>
        </div>
      ))}
    </div>
  );
}</code>

Tunjukkan data di sini

{console.log('bekas kad dalam', data)}

Tetapi ia tidak berkesan

{data.map((card) ==> (
    <div className='card' key={card.id}>
      <div className='card-title' onClick={toggleHandler}>
        <h3>{card.title}</h3>
        <AiFillCaretUp className={rotate} />
      </div>
      <div className={paraClass}>
        <p>{card.note}</p>
      </div>
    </div>
  ))}
</div>

Saya harap anda memahami masalah ini.

Answer 1

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);
      })
  }, []);