Uncaught TypeError: Cannot read properties of null (reading 'map')

전에 해결했는데 까먹어서 다시 찾아본 오류,,

 

app.jsx 코드

const [todos, setTodos] = useState(null);

 

  const fetchTodos = async () => {

    const { data } = await axios.get("http://localhost:4000/todos");

    setTodos(data);

  };

 

<div>

        {todos.map((item) => {

          return (

            <div key={item.id}>

              {item.id}:{item.title}

            </div>

          );

        })}

      </div>

 

db.json 코드

{

  "todos": [

    {

      "title": "데이터1",

      "id": 1

    },

    {

      "title": "데이터2",

      "id": 2

    }

  ]

}

json-server를 사용해서 db에 있는 데이터를 가져와서 화면에 뿌려줄려고 했는데 오류 발생

 

Uncaught TypeError: Cannot read properties of null (reading 'map')

 

처음에 useState값이 null인지 모르고 시간 낭비하다가 발견하고, null을 [](배열)로 변경하니까 실행 완료,,

const [todos, setTodos] = useState([]);

 

헤매고 있을 때 구글에 검색해본 해결 방법 2가지

 

1.&& 사용

const [todos, setTodos] = useState(null);

 

  const fetchTodos = async () => {

    const { data } = await axios.get("http://localhost:4000/todos");

    setTodos(data);

  };

 

<div>

        {todos && todos.map((item) => {

          return (

            <div key={item.id}>

              {item.id}:{item.title}

            </div>

          );

        })}

      </div>

 

db.json 코드

-JavaScript에서 true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. 

 

2.옵셔널 체이닝(?.)

const [todos, setTodos] = useState(null);

 

  const fetchTodos = async () => {

    const { data } = await axios.get("http://localhost:4000/todos");

    setTodos(data);

  };

 

<div>

        {todos?.map((item) => {

          return (

            <div key={item.id}>

              {item.id}:{item.title}

            </div>

          );

        })}

      </div>

 

-?. 연산자의 왼쪽에 있는 것을 평가한뒤 undefined 또는 null이 맞다면 undefined를 반환하고 평가 끝남. 만약 아니라면 계속해서 평가가 이루어진다.

-&&연산자를 사용하면 코드가 길어질 수 있기 때문에 나옴