亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

UI dalam Reactjs tidak dikemas kini
P粉649990163
P粉649990163 2023-08-14 17:32:30
0
1
862
<p>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. </p> <p>Pemindahan data ke pangkalan data Firebase dengan sempurna. </p> <p>Dapatkan data. </p> <p>Masalah yang saya hadapi ialah data yang diambil tidak dikemas kini dalam UI. </p> <p><br /></p> <pre class="snippet-code-js lang-js prettyprint-override"><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></pre> <p><br /></p> <p>Tunjukkan data di sini</p> <pre class="brush:php;toolbar:false;">{console.log('bekas kad dalam', data)}</pre> <p>Tetapi ia tidak berkesan</p> <pre class="brush:php;toolbar:false;">{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></pre> <p>Saya harap anda memahami masalah ini. </p>
P粉649990163
P粉649990163

membalas semua(1)
P粉276064178

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); // 在這里數(shù)據(jù)已經(jīng)準備好了
    };
    fetchNote();
  }, []);

fetchNote 是一個異步函數(shù),所以它需要一些時間來完成任務(wù)并獲取數(shù)據(jù)。因此,你應(yīng)該等待數(shù)據(jù)準備好,不幸的是,當你在調(diào)用 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);
      })
  }, []);
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan