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

<p>我正在學(xué)習(xí)React并學(xué)習(xí)了一些基礎(chǔ)知識(shí)，所以利用這些知識(shí)制作了這個(gè)基本項(xiàng)目。 我正在使用React和Firebase制作一個(gè)簡(jiǎn)單的筆記保存應(yīng)用。</p> <p>數(shù)據(jù)完美地傳輸?shù)紽irebase數(shù)據(jù)庫。</p> <p>獲取數(shù)據(jù)。</p> <p>我面臨的問題是獲取的數(shù)據(jù)在UI中沒有更新。</p> <p><br /></p> <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useEffect, useState } from 'react'; import { AiFillCaretUp } from 'react-icons/ai'; import './Card.css'; export default function Card(props) { const [showPara, setShowPara] = useState(false); const [data, setData] = useState([]); console.log('inside card'); useEffect(() => { let notesData = []; console.log('inside UseEffect'); 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 }); } }; fetchNote(); // console.log(notesData); setData(notesData); }, []); const toggleHandler = () => { setShowPara((preVal) => !preVal); }; const paraClass = showPara ? 'card-para toggle' : 'card-para'; const rotate = showPara ? 'icon rotate' : 'icon'; return ( <div className='container'> {console.log('inside card container', data)} {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> ); }</code></pre> <p><br /></p> <p>在此顯示數(shù)據(jù)</p> <pre class="brush:php;toolbar:false;">{console.log('inside card container', data)}</pre> <p>但這不起作用</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>我希望你能理解問題所在。</p>

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)準(zhǔn)備好了
    };
    fetchNote();
  }, []);

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; // 返回一個(gè)解析為 'notesData' 的 promise
    };

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