저장을 습관화

에러 기록 - Cannot read properties of null (reading 'map') TypeError: Cannot read properties of null (reading 'map') 본문

공부/React

에러 기록 - Cannot read properties of null (reading 'map') TypeError: Cannot read properties of null (reading 'map')

ctrs 2023. 10. 27. 20:45

- 증상

React로 작성한 프론트엔드에서 express로 작성된 백엔드의 데이터를 가져오는 테스트 중 발생한 문제

Uncaught runtime errors:
×
ERROR
Cannot read properties of null (reading 'map')
TypeError: Cannot read properties of null (reading 'map')
    at App (http://localhost:3000/main.3f8e2bcad6cf203e4b25.hot-update.js:42:24)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:19927:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23213:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:24509:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:9519:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:9563:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:9620:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:29494:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:28741:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:28664:9)
ERROR
Cannot read properties of null (reading 'map')
TypeError: Cannot read properties of null (reading 'map')
    at App (http://localhost:3000/main.3f8e2bcad6cf203e4b25.hot-update.js:42:24)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:19927:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23213:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:24509:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:9519:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:9563:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:9620:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:29494:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:28741:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:28664:9)
ERROR
Cannot read properties of null (reading 'map')
TypeError: Cannot read properties of null (reading 'map')
    at App (http://localhost:3000/main.3f8e2bcad6cf203e4b25.hot-update.js:42:24)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:19927:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23213:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:24509:20)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:29472:18)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:28741:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:28664:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:28637:11)
    at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:28129:24)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:28338:24)

 

백엔드가 되는 /server/app.js에는 아래와 같은 배열 내용이 있었고

 

프론트엔드가 되는 /client/src/App.js에서 fetch로 읽어와, setTodoList한다.

초기값이 null인 todoList는 백엔드의 내용을 가지게 될 것이었다..

 

- 원인

useState(null)로, 즉 todoList의 초기값이 null이어서 발생한 문제

null에는 map 메소드를 사용할수 없어서 발생한 에러였다.

 

 

- 해결

todoList의 초기값을 빈 배열 []로 바꿔주었다.

 

에러가 발생하지 않고, 백엔드의 내용을 잘불러오고 있다.

 

'공부 > React' 카테고리의 다른 글

메모 - React + Express.js 환경에서 fetch, axios 사용법  (0) 2023.10.27
에러 기록 - React에서는 쓰는 문법은 JavaScript가 아닌 JSX이다.  (0) 2023.10.27
React - 입문 기록 9  (0) 2023.10.25
React - 입문 기록 8  (0) 2023.10.25
React - 입문 기록 7  (0) 2023.10.24
'공부/React' Related Articles more