Have to find that dataList is different from dataList3

[SeongsangCHO]

let [dataList2, setData] = useState([]);
useEffect(()=>{
  async function fetchData(){
    const result = await axios('http://localhost:5000/api/json/faq');
    setData(result.data);
    }
    fetchData();
},[]);
let dataList3 = dataList2[program];

console.log(dataList3[0]); // error

I can`t use index of dataList3 What is a different?

ref

---

컴포넌트/faq.js에서

리덕스하기전 axios로 데이터 받아와서 작업하려고했는데 기존에 let dataList = allDataList[program]이랑 dataList3의 차이를 모르겠네욜 둘이 typeof찍었을 때 object로 나오고 console로 찍어봤을 때는

같은 값이 나오는데 dataList3는 인덱스로 접근이 안되네요 링크에서 getInitProps()와 관련된 것 같고, 에러메세지 상에서도 호출스택에 getInitProps가 나오는 것을 보니.. 뭔가 관련이 있는 듯한데 더 알아봐야겠슴다.

nextJS getInitProps docs

[365kim]

혹시 이건 안될까용 let dataList3 = allDataList.program[0]; -> let dataList3 = allDataList[program[0]]; 아님 요고..

[SeongsangCHO]

@365kim 몌님의 링크와 같은 오류였어요!

이슈의 원인은 컴포넌트가 랜더링되고 난 후 데이터를 받아오는 부분인 useEffect가 수행이 되는데 데이터를 가져오기 전에 undefined인 데이터를 출력하려고 하니까 에러가 발생했던 것이었습니다.

최신문법인 optional chaining이라는 걸 사용해서 해결했습니다. ecma최신문법(feat.seonpark)

dataList[0]?.eventKey로 초기 랜더링시 undefined가 반환되지만 랜더링 이후 useEffect로 데이터를 받아오고 다시 채워진 데이터로 리랜더링을 수행함으로써 문제가 해결되었습니다.

감사합니다!