Die Benutzeroberfläche in Reactjs wird nicht aktualisiert

Question

Ich lerne React und habe einige Grundlagen gelernt, also habe ich dieses Wissen genutzt, um dieses grundlegende Projekt zu erstellen. Ich erstelle eine einfache App zum Speichern von Notizen mit React und Firebase.

Fehlerfreie Datenübertragung zur Firebase-Datenbank.

Daten abrufen.

Das Problem, mit dem ich konfrontiert bin, besteht darin, dass die abgerufenen Daten in der Benutzeroberfläche nicht aktualisiert werden.

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

Exportieren Sie die Standardfunktion 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 = waiting fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
      const data = Warten auf Antwort.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 rotieren = showPara ? 'Symbol drehen': 'Symbol';
  zurückkehren (
    <div className='container'>
      {console.log('im Kartencontainer', Daten)}

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

Daten hier anzeigen

{console.log('inside card container', data)}

Aber es funktioniert nicht

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

Ich hoffe, Sie verstehen das Problem.

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