[2022.07.16](2) json중첩 사용된 데이터 불러오기 오류

history.jsx

 

수정1

 

오류: json이 중첩된 상태라 불러오려는데 계속 오류가 났다.

       오류코드: Cannot read properties of undefined (reading 'map') ...

 

▼ json 배열은 이런 형태

{
  "first-tab": [
    {
      "id": 0,
      "year": "2021",
      "list": ["12 한국벤처캐피탈협회M&A 자문기관 공로패 수상", "09 항공안전기술원 드론기업 컨설팅 및 투자유치 지원사업 운영", "09 스포츠산업 선도기업 육성 지원사업 기관 선정", "08 서울대학교 BIG3 시스템반도체 분야 기업 글로벌 역량강화지원", "08 서울산업진흥원 국내외 VC/기업 네트워킹 행사 운영 대행", "07 경기경제과학진흥원 경기스타트업 M&A교육 및 매칭데이 운영기관 선정", "07 용인시디지털산업진흥원 창업기업 투자유치 역량강화 프로그램 운영", "07 신용보증기금 컨설팅 그룹 선정", "06 제3회 경동인베스트 스타트업 오픈이노베이션 챌린지 행사 주관", "05 광주정보문화산업진흥원 글로벌 엑셀러레이팅 프로그램 운영기관 선정", "04 경기경제과학진흥원 판교 스타트업 투자 교류회 운영기관 선정", "03 한국거래소 (KRX) 업무 표창장 수상", "03 녹색기술센터 서울시 녹색기업 IR컨설팅 및 투자상담회 대행", "02 순천시 창업연당 운영 기관 선정", "01 중국-베이징 글로벌기술사업화센터 11기 글로벌 엑셀러레이팅 수행"]
    },
    {
      "id": 1,
      "year": "2020",
      "list": ["10 성남산업진흥원 2020 융복합 콘텐츠기업 육성 엑셀러레이팅 운영", "09 서울시 싱가포르 정보통신전시회 서울관 운영", "08 인천콘텐츠기업지원센터 액셀러레이팅 프로그램 운영용역", "08 경기경제과학진흥원 IR투자실무교육 운영사 선정", "07 KOTRA 글로벌 CVC관심 품목 조사/잠재기업 발굴 용역 선정", "07 스타기업 맞춤형 심화 커스터마이징 컨설팅", "06 스포츠산업 선도기업 육성 지원사업 기관 선정", "06 제2회 경동인베스트 스타트업 오픈이노베이션 챌린지 행사 주관", "05 산업은행 KDB TechConnectDay 개최", "05 국민체육진흥공단 중소기업지원사업 수행기관 선정", "04 신용보증기금 컨설팅 그룹 선정", "01 중국-베이징 글로벌기술사업화센터 9기‧10기 글로벌 엑셀러레이팅 수행", "01 춘천바이오산업진흥원‘성장전략보고서지원’ 기관 선정", "01 중소벤처기업진흥공단 제조중소기업 혁신바우처사업수행기관 선정"]
    },
   ....
  ],
  "second-tab": [
    {
      "year": "2017",
      "list": ["12 서울시 중화권 투자유치매뉴얼 제작", "11 기술거래촉진네트워크사업 한국ㆍ베트남 기술포럼 및 기술(+제품)설명회 수행", "11 KDB TechConnectDay (소재·부품 기술 기반 투자유치IR) 공동주최", "10 기술거래촉진네트워크사업 한국·베트남(하노이) 기술사업화 매칭상담회 개최", "09 제6회 중국 투자유치로드쇼 수행", "09 북경 한·중 선진 첨단기술사업화 상담회 개최", "09 경기도 중국 투자IR 설명회 개최", "07 산업통상자원부 사업화전문회사 지정", "05 경기테크노파크 기술거래촉진네트워크 기관 선정", "05 한ㆍ중 BIO&첨단기술사업화 (하이먼)매칭 상담회 개최", "05 서울시 투자협력주간 수행기관 선정", "01 광주과학기술원 창업도약패키지사업 협약", "01 산업기술진흥원 글로벌사업화 협력센터(GCC) 재지정", "01 하이서울기업 비즈니스서비스(BS)부문 지정"]
    },
    {
      "year": "2016",
      "list": ["12 한ㆍ중 BIO헬스기술사업화 매칭 상담회(석가장) 수행", "11 한ㆍ중 IOT기술사업화 매칭 상담회(천진) 수행", "11 절강기술대표단 초청 한·중 기술교류 및 J/V 기술 이전 투자 간담회 수행", "11 북경 글로벌기술이전대회 제3회 반도체국제회의 중점 매칭상담회 수행", "10 대진테크노파크 ‘수도권 테크노파크 합동 투자 컨설팅 프로그램’ 컨설팅 기관 지정", "10 한국소재부품투자기관협의회 ‘글로벌 M&A유망분야 타겟리서치’ 기관 지정", "09 KATH 기술사업화 바우처 지원사업자 지정", "09 한국BI기술사업화협회 기술사업화 바우처 지원사업자 지정", "09 KITIA 중국투자유치로드쇼 수행", "08 춘천바이오산업진흥원 ‘경영전략-마케팅전략’ 교육", "08 인천지식재산센터 ‘IP모의투자오디션’ 컨설팅 기관 지정", "07 녹색기술센터 녹색기술인증 실무교육 및 후속 심화교육(컨설팅)", "07 중소기업진흥공단 해외민간네트워크 기관 지정", "07 산업기술진흥원 글로벌사업화 협력센터(GCC) 선정", "05 절강성 정부 초청 조인트벤처 , 해외투자 IR 및 매칭상담회 개최", "04 한국발명진흥회 ‘IP-BIZ 상설투자마트 프로그램’ 컨설팅 기관 지정", "03 한국소재부품투자기관협의회 투자IR 컨설팅 기관 지정", "03 산업통상자원부 “기술거래기관” 지정", "03 신용보증기금 컨설팅그룹 선정", "03 환경산업협회 컨설팅기관 지정", "01 중국 강소성 하이먼정부의 한국대표처 설립, MOU체결 (기술거래, 인큐베이팅, m&a)"]
    },
    ....
  ],
  ...

 

▼ 해결: 앞에 변수명&&를 추가해준다.

{
              firstDt&&firstDt[0].list.map(function(data,i){
                return(
                  <div></div>
                )
              })
            }

 

▼ 참고: 그 위에는 이런 형태로 작성되어 있음

const ZetaHistory = () => {
  const [ztHisDt,setZtHisDt]=useState([]);

  useEffect(()=>{
    setZtHisDt(ztHistoryDt);
  },[])

  const firstDt =ztHisDt['first-tab'];
....

 

▼ firstDt변수에 안 담고 바로 불러올 때는 이렇게도 가능함

 

{
              ztHisDt['first-tab']&&ztHisDt['first-tab'][0].list.map(function(data,i){
                return(
                  <div></div>
                )
              })
            }

 

참고 사이트: https://devbirdfeet.tistory.com/48?category=828965 

React 실행오류 Array.map is not a function

 

 

---

수정2 

오류2: 아래 코드로 작성시 json의 해당 배열의 map을 여러번 밑에 작성해 너무 길어질 것 같아 간단하게 작성하고 싶음

              {
                ztHisDt['first-tab']&&ztHisDt['first-tab'].map(function(data,i){
                  return(
                    <div key={data.id}>
                      <p>{ztHisDt['first-tab'][i].year}</p>
                      <div>
                        {
                          ztHisDt['first-tab'][i].list.map(function(data,i){
                            return(
                              <p>{data}</p>
                            )
                          })
                        }
                      </div>
                    </div>
                  )
                })
              }

 

해결2:

- ztHisLists라는 배열을 담은 변수를 생성

- json의 분류된 해당 배열 title을 ztHisLists 배열값으로 넣고, 배열수만큼 map이 돌면서 data를 가져온다. 

=>아래 코드를 통해 배열의 전체('first-tab','second-tab','third-tab','fourth-tab')의 해당 data를 가져올 수 있었음.

const ztHisLists=['first-tab','second-tab','third-tab','fourth-tab'];

{
                ztHisLists.map(function(d,i){
                  return(
                    <div>
                      {
                        ztHisDt[ztHisLists[i]]&&ztHisDt[ztHisLists[i]].map(function(data,i){
                          return(
                            <div key={data.id}>
                              <p>{data.year}</p>
                              <div>
                                {
                                  data.list.map(function(data,i){
                                    return(
                                      <p>{data}</p>
                                    )
                                  })
                                }
                              </div>
                            </div>
                          )
                        })
                      } 
                    </div>
                  )
                })
              }

 

 

오류3: map안에 key값을 다 할당했는데 계속 Warning: Each child in a list should have a unique "key" prop. 오류가 뜸

해결: json에 id값이 없는 부분이 있었음...다시 전체 id부여한 후 실행하자 오류 해결

 

▼ 전체 key값 부여한 코드

              {
                ztHisLists.map(function(titleDt,i){
                  return(
                    <div key={titleDt}>
                      {
                        ztHisDt[ztHisLists[i]]&&ztHisDt[ztHisLists[i]].map(function(data,i){
                          return(
                            <div key={data.id}>
                              <p>{data.year}</p>
                              <div>
                                {
                                  data.list.map(function(datas,i){
                                    return(
                                      <p key={datas}>{datas}</p>
                                    )
                                  })
                                }
                              </div>
                            </div>
                          )
                        })
                      } 
                    </div>
                  )
                })
              }