Reactjs中的UI沒有被更新

Question

我正在學習React並學習了一些基礎知識，所以利用這些知識製作了這個基本專案。 我正在使用React和Firebase製作一個簡單的筆記保存應用程式。

資料完美地傳輸到Firebase資料庫。

取得數據。

我面臨的問題是取得的資料在UI中沒有更新。

<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>

在此顯示資料

{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>

我希望你能理解問題所在。

Answer 1

一種方法是這樣寫：

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) 時，資料還沒準備好。

或你可以在非同步函數內部返回數據，並自動返回另一個解析為所需數據的 promise，然後你可以更新你的數據：

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