React Hooks TypeError:todos is undefined

Pro styling používám PERN Stack s bootstrapem. Chci tedy přistupovat ke svým datům JSON a zobrazovat je ve formě seznamů úkolů. Když jsem se pokusil použít funkci mapy, dostal jsem TypeError:

Zde je kód:

import React, { useState, useEffect } from "react";

const ListToDo = () => {
  const [todos, setTodos] = useState([]);

  const getTodos = async () => {
    try {
      const res = await fetch("http://localhost:3000/todos");
      const jsonData = await res.json();
      console.log(jsonData.data.todos);
      setTodos(jsonData.data.todos);
    } catch (err) {
      console.log("ERROR: ", err);
    }
  };

  useEffect(() => {
    getTodos();
  }, []);

  return (
    <>
      <ul className="list-group my-4 ">
        {todos.map((todo) => (
          <li className="list-group-item d-flex justify-content-between align-items-center">
            {todo.description}
            <span className="">
              <button className="btn btn-dark ">Edit</button>
              <span> </span>
              <button className="btn btn-dark ">Delete</button>
            </span>
          </li>
        ))}
      </ul>
    </>
  );
};

export default ListToDo;

Odpověď

Špatně jsem napsal svou proměnnou. Takže problém byl, že jsem psal jsonData.data.todos místo toho vypnuto jsonData.data.toDos .