cannot read property 'map' of null

네이티브 + 리덕스 + 사가 조합으로 플젝을 하고 있다. 참으로 헷갈리는 에러 코드가 많다.

분명 맞다고 생각한 로직에서 값이 없다고 뜬다거나 등..

 

아래 로직 또한 cannot read property map of null 이 떴다.

정확한 원인을 모른 채 이것저것 만지다가 해결이 된 적이 여러 번이었는데,

이번에 확실히 짚고 넘어가고 싶었다.

 

 

<View>
                  <QnADetailInfoOfBottom>
                    <QnAheader>
                      <Text>궁금한 점을 남겨주세요.</Text>
                      <QnAButtonDetailInfoOfBottom
                        title={"글쓰기"}
                        onPress={() => {
                          props.navigation.navigate("QnAPlus");
                        }}
                      />
                    </QnAheader>
                    {qna && qna.length === 0
                      ? <Text>등록된 QnA가 없습니다</Text>
                      : qna.map(el => {
                        return <QnAList key={el.id} list={el} prop={props}/>;
                      })
                    }

                  </QnADetailInfoOfBottom>
                </View>

export const initialState = {
  home : null,
  goodsInfo : null,

  qna: [],  // load -> add 까지

 

예제 코드이자, 내가 실제로 쓴 코드이다.

initialState는 리덕스 로직에서 쓰이는 state이다. 여기서 qna를 불러와야 하는데

해당 에러가 떴다.

 

영어를 그대로 읽자면 '값이 없다'이다.

그렇기때문에 null 이라고 되어있는 값을 빈 배열로 할당해 놓는 식으로,

유의미한 값으로 채워넣는 것이다.

그러면 load를 할 때에 제목과 같은 에러는 뜨지 않는다.

 

또한, 사가를 통해 해당 qna에 값을 넣는 로직을 구현해 놓았다면 useEffect를 통해 qna에 값이 들어가게 된다.

그러므로, qna가 초기에 null 값으로 지정이 되어있더라도, 값이 할당이 되기 때문에, 렌더링 하는 시점에서는 이미 값이 있는 것으로 나온다.

 

정리하자면,

qna 에 유의미한 값을 애초에 설정하거나,

혹은,

useEffect로 dispatch, saga 를 통해 데이터를 받아와서 qna에 넣거나.