Reactjs의 UI가 업데이트되지 않습니다.

Question

저는 React를 배우며 몇 가지 기본 사항을 배웠기 때문에 이 지식을 활용하여 이 기본 프로젝트를 만들었습니다. 저는 React와 Firebase를 사용하여 간단한 메모 저장 앱을 만들고 있습니다.

데이터가 Firebase 데이터베이스로 완벽하게 전송됩니다.

데이터를 가져옵니다.

제가 겪고 있는 문제는 가져온 데이터가 UI에서 업데이트되지 않는다는 것입니다.

<code>import { useEffect, useState } from 'react';
'react-icons/ai'에서 { AiFillCaretUp }을 가져옵니다.
import './Card.css';

기본 기능 카드(props) 내보내기 {
  const [showPara, setShowPara] = useState(false);
  const [data, setData] = useState([]);
  console.log('카드 내부');

  useEffect(() => {
    NotesData = [];
    console.log('내부 UseEffect');
    const fetchNote = 비동기 () =>
      const 응답 = fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json')를 기다립니다.
      const 데이터 = 응답을 기다립니다.json();
      for (데이터의 const 키) {
        NotesData.push({ id: key, title: data[key].title, note: data[key].note });
      }
    };
    fetchNote();
    // console.log(notesData);
    setData(notesData);
  }, []);

  const 토글핸들러 = () =>
    setShowPara((preVal) => !preVal);
  };

  const paraClass = showPara ? '카드-파라 토글': '카드-파라';
  const 회전 = showPara ? '아이콘 회전': '아이콘';
  반품 (
    <div className='컨테이너'>
      {console.log('카드 컨테이너 내부', 데이터)}

      {data.map((카드) => (
        <div className='카드' key={card.id}>
          <div className='card-title' onClick={toggleHandler}>
            <h3>{카드.제목}</h3>
            <AiFillCaretUp className={rotate} />
          </div>
          <div className={paraClass}>
            <p>{card.note}</p>
          </div>
        </div>
      ))}
    </div>
  );
}</code>

여기에 데이터 표시

{console.log('카드 컨테이너 내부', 데이터)}

하지만 작동하지 않습니다

{data.map((카드) => (
    <div className='카드' key={card.id}>
      <div className='card-title' onClick={toggleHandler}>
        <h3>{카드.제목}</h3>
        <AiFillCaretUp className={rotate} />
      </div>
      <div className={paraClass}>
        <p>{card.note}</p>
      </div>
    </div>
  ))}
</div>

문제를 이해하시기 바랍니다.

Answer 1

한 가지 방법은 다음과 같이 작성하는 것입니다.

으아악

fetchNote 是一个异步函数，所以它需要一些时间来完成任务并获取数据。因此，你应该等待数据准备好，不幸的是，当你在调用 fetchNote() 后立即使用 setData(notesData) 아직 데이터가 준비되지 않았습니다.

또는 비동기 함수 내에서 데이터를 반환하고 필요한 데이터로 해결되는 또 다른 Promise를 자동으로 반환한 다음 데이터를 업데이트할 수 있습니다.

으아악