[Error] doc 사용 시 n.indexOf is not a function 에러

키워드 : doc -> 참조 데이터 / n.indexOf is not a function 오류

 

1) doc으로 받아온 반환값은 타입이 document(문서)이기 때문에 참조 데이터이다.

const docRef = doc(db, 'dictionary', dictionary_id)

참조값은 데이터를 받아와서 사용 할 수 없기 때문에

(await getDoc(docRef))

를 사용해서 docRef에 해당하는 데이터를 불러오면 promise 형태로 넘어온다.

(await getDoc(docRef)).data()

거기서 내가 원하는 값은 딕셔너리의 형태의 데이터이기 때문에 .data()를 사용한다.

 

2) 글 작성 후 새로고침 없이 수정이나 삭제를 할 경우 에러 발생

(새로고침을 하면 수정과 삭제가 에러 없이 잘 실행 된다.)

 

(문제점)

: 함수형 컴포넌트에서 useEffect()를 사용해서 컴포넌트가 처음 생성되면 dispatch(loadDictionaryFB())를 사용해서

firebase에 있는 값을 불러왔다.

 

(과정)

1) 컴포넌트가 ComponentMount() 될 때는 firestore(서버)에서 값을 받아 온다.

2) 글을 작성하고 수정이나 삭제 버튼을 누르면 n.indexOf is not a function 오류가 발생한다.

그런데 글 작성 후 새로고침을 하면 수정이나 삭제가 잘 된다.

3) ComponentDidMount() 될 때 데이터를 불러오는 데, ComponentWillMount() 때는 데이터를 못불러 올까라고 생각함

4) useEffect 코드를 다시 봤더니 

  React.useEffect(() => {
    dispatch(loadDictionaryFB());
  }, [])

ComponentWillMount()가 일어나는 조건을 넣어주지 않았다. [] 안에 어떤 값이 변경 되었을 때 ComponentWillMount()를 실행 할 지 넣어줘야 하는 데 그게 없어서 계속 ComponentDidMount() 때만 loadDictionaryFB()가 디스패치 됨.

-> 즉, 업데이트 되는 조건을 안넣어 놓고 왜 업데이트 안되지 한 거다.

5) 어떤 변수의 데이터가 변경 될때마다 디스패치가 일어날 지 생각 해다가 store의 값이 바뀌면 ComponentWillMount()가 일어나야 함으로 useInfo를 넣어더니 해결 되었다.

  const useInfo = useSelector((state) => state.dictionary);  
  
  React.useEffect(() => {
    dispatch(loadDictionaryFB());
  }, [useInfo])

 

(해결)

ComponentWillMount가 발생하는 조건 넣어줬더니 해결됨

  React.useEffect(() => {
    dispatch(loadDictionaryFB());
  }, [useInfo])