firebase에서 db 데이터 값 가져오기 중...
532
投稿した質問数 10
코드샌드박스에서 작성중인 데이터입니다.
https://codesandbox.io/s/upbeat-jasper-gfb978?file=/src/App.js:0-563
import "./styles.css";
import { db } from "./firebase";
import { doc, onSnapshot }
export default function App() { const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => { let word = "hsdsi";
console.log("Current data: ", doc.data().name); word = doc.data().name; });
//word = unsub.name;
return ( <div> <p> {word} </p> </div> ); // Add a new document in collection "cities"}
word 변수를 선언해서 return 값으로 word 변수를 받아서 rendering 하려고 합니다.
onSnapshot( ) 안에서 let word = "" ;
으로 초기 변수 설정을 해주지 않으면,
에러가 계속 뜨더라구요.
어쩔수없이 이렇게 선언해서 return 값에서 불러왔는데, 렌더링은 잘되지만, 코드 자체는 에러가 뜹니다.
제가 볼때도 const 내부에서 선언하면 호이스팅이 안되기때문에 변수 초기화가 안되서 이렇게 하면 안될것 같지만, 일단 렌더링이 되긴하네요.
근데 코드상에서는 빨간줄이 밑줄 그어지면서
잘못 코드한것처럼 에러가 나는것 같습니다.
어떻게 해줘야할까요?
回答 1
0
안녕하세요, 인프런 AI 인턴이에요.
우선, 코드상에서 빨간줄과 에러가 나는 이유는 onSnapshot 함수에서 받아오는 데이터의 처리 시점과 렌더링 시점이 겹치지 않기 때문입니다. 즉, 데이터가 아직 받아와지기 전에 변수 word를 반환하기 때문에 발생하는 문제입니다.
이를 해결하기 위해 word 변수의 상태를 useState 훅으로 관리하고, 데이터를 받아와서 상태 업데이트 후 렌더링하도록 변경해보세요. 코드는 아래와 같이 변경할 수 있습니다.
import “./styles.css”;
import { db } from “./firebase”;
import { doc, onSnapshot } from “firebase/firestore”;
import { useState, useEffect } from “react”;
export default function App() {
const [cityName, setCityName] = useState(“”);
useEffect(() => {
const unsub = onSnapshot(doc(db, “cities”, “SF”), (doc) => {
setCityName(doc.data().name);
});
return unsub;
}, []);
return (
{cityName}
);
}
이렇게 코드를 변경하면, 데이터를 정상적으로 받아와서 변수를 업데이트하고 화면에 렌더링할 수 있습니다. 언제든지 질문해주세요!
key is not a prop 에러에 대하여
0
697
1
App.js에서 handleCreate 함수 생성 시 오류
0
463
1
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
0
406
1
강의 교재 받을 수 있나요?
0
438
0
라이프사이클 관련 질문
0
289
0
onClick = {smoe callback} 은 render 를 다시 호출 하나요?
0
225
0
동영상 하단에 링크가 없어요
0
314
0
var를 사용안한다 하셨는데
0
411
1
수강자료는 어디서 받나요
1
584
1
영상 링크가 변경된 것 같습니다.
10
440
0
계속 보고있지만 구동되는 방향성을 이해못하겠어요 ㅠㅠ.
0
280
0
리액트 virtualDOM 개념과 state 불변성 관련 개념이 어떻게 다른건지 궁금합니다.
0
229
0
npm 을 사용해서 create 하려니까 안되네요
0
262
0
배열안의 데이터 수정하기에서 12:19 화면 부분이 궁금해서 질문드립니다.
0
229
0
계속 PhoneForm.js 파일을 못읽는거같더니
1
267
0
this에 관해서 질문드립니다!!
0
334
1
배열 데이터 렌더링 및 관리파트에서 props로 값 가져올때 질문있습니다!
0
218
0
함수형 컴포넌트는 state를 어떤 식으로 정의하는지 궁금합니다.
0
417
1
ㅇ
0
343
1
import 질문
0
292
2
index.js 파일이 다릅니다
2
224
0
const {변수명} = ? 표현법
1
2862
1
create-react-app 오류 (Cannot find module './encoding/utf8')
0
277
0
shouldComponentUpdate NextProps 와 nextState 질문있습니다.
0
207
0