ReactjsのUIが更新されない

Question

私は React を学習しており、いくつかの基本を学んだので、この知識を使用してこの基本的なプロジェクトを作成しました。 ReactとFirebaseを使ってシンプルなメモ保存アプリを作成しています。

データは Firebase データベースに問題なく転送されます。

データを取得します。

私が直面している問題は、取得されたデータが UI で更新されないことです。

<code>import { useEffect, useState } from 'react';
import { AiFillCaretUp } から 'react-icons/ai';
'./Card.css' をインポートします。

デフォルト関数のエクスポート Card(props) {
  const [showPara, setShowPara] = useState(false);
  const [データ、setData] = useState([]);
  console.log('カード内部');

  useEffect(() => {
    ノートデータ = []; にしましょう。
    console.log('UseEffect 内');
    const fetchNote = async () => {
      const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
      const data = 応答を待ちます.json();
      for (データ内の定数キー) {
        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 ? 'カードパラトグル' : 'カードパラ';
  constrotate = showPara ? 'アイコン回転' : 'アイコン';
  戻る （
    <div className='コンテナ'>
      {console.log('カードコンテナ内', data)}

      {data.map((カード) => (
        <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('カードコンテナ内', 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

次のように記述するのも 1 つの方法です:

リーリー

fetchNote は非同期関数であるため、タスクが完了してデータを取得するまでに時間がかかります。したがって、データの準備ができるまで待つ必要があります。残念ながら、fetchNote() を呼び出した直後に setData(notesData) を使用すると、データはまだ準備ができていません。

または 非同期関数内でデータを返し、必要なデータに解決される別の Promise を自動的に返してから、データを更新できます。 リーリー