L'interface utilisateur de Reactjs n'est pas mise à jour

Question

J'apprends React et j'ai appris quelques bases, j'ai donc utilisé ces connaissances pour réaliser ce projet de base. Je crée une application simple de sauvegarde de notes en utilisant React et Firebase.

Les données sont transférées parfaitement vers la base de données Firebase.

Obtenir des données.

Le problème auquel je suis confronté est que les données récupérées ne sont pas mises à jour dans l'interface utilisateur.

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

fonction d'exportation par défaut Carte (accessoires) {
  const [showPara, setShowPara] = useState(false);
  const [données, setData] = useState([]);
  console.log('carte intérieure');

  useEffect(() => {
    laissez notesData = [];
    console.log('à l'intérieur de UseEffect');
    const fetchNote = async () =>
      const réponse = wait fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
      const data = attendre réponse.json();
      pour (clé const dans les données) {
        notesData.push({ id : clé, titre : données[clé].titre, note : données[clé].note });
      }
    } ;
    récupérerNote();
    // console.log(notesData);
    setData(notesData);
  }, []);

  const toggleHandler = () =>
    setShowPara((preVal) => !preVal);
  } ;

  const paraClass = showPara ? 'card-para toggle' : 'card-para';
  const rotate = showPara ? 'icône rotation' : 'icône';
  retour (
    <div className='conteneur'>
      {console.log('à l'intérieur du conteneur de carte', données)}

      {data.map((carte) => (
        <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>

Afficher les données ici

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

Mais ça ne marche pas

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

J'espère que vous comprenez le problème.

Answer 1

Une façon est d'écrire comme ceci :

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) Les données ne sont pas encore prêtes.

Alternativement vous pouvez renvoyer les données à l'intérieur de la fonction asynchrone et renvoyer automatiquement une autre promesse qui résout les données requises, puis vous pouvez mettre à jour vos données :

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