<p>저는 React를 배우며 몇 가지 기본 사항을 배웠기 때문에 이 지식을 활용하여 이 기본 프로젝트를 만들었습니다. 저는 React와 Firebase를 사용하여 간단한 메모 저장 앱을 만들고 있습니다. </p> <p>데이터가 Firebase 데이터베이스로 완벽하게 전송됩니다. </p> <p>데이터를 가져옵니다. </p> <p>제가 겪고 있는 문제는 가져온 데이터가 UI에서 업데이트되지 않는다는 것입니다. </p> <p><br /></p> <pre class="snippet-code-js lang-js Prettyprint-override"><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></pre> <p><br /></p> <p>여기에 데이터 표시</p> <pre class="brush:php;toolbar:false;">{console.log('카드 컨테이너 내부', 데이터)}</pre> <p>하지만 작동하지 않습니다</p> <pre class="brush:php;toolbar:false;">{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></pre> <p>문제를 이해하시기 바랍니다. </p>