Reactjs中的UI没有被更新

Question

我正在学习React并学习了一些基础知识，所以利用这些知识制作了这个基本项目。我正在使用React和Firebase制作一个简单的笔记保存应用。数据完美地传输到Firebase数据库。获取数据。我面临的问题是获取的数据在UI中没有更新。import{useEffect,useState}from'react';import{AiFillCaretUp}from'react-icons/ai';im

P粉276064178 · Answer

一种方法是这样写：

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