Javascript 反应钩子类型错误：TODO未定义

我正在使用PERN Stack和引导程序进行样式设置。因此，我想访问我的JSON数据并以todo列表的形式显示它。当我尝试使用map函数时，我得到了TypeError：

代码如下：

import React，{useState，useffect}来自“React”；
常量ListToDo=（）=>{
const[todos，setTodos]=useState（[]）；
常量getTodos=async（）=>{
试一试{
const res=等待获取（“http://localhost:3000/todos");
const jsonData=await res.json（）；
log（jsonData.data.todos）；
setTodos（jsonData.data.todos）；
}捕捉（错误）{
log（“错误：”，err）；
}
};
useffect（（）=>{
getTodos（）；
}, []);
返回(

{todo.map（（todo）=>(

{todo.description}
编辑
删除

))}

);
};
导出默认列表TODO；

试试看

const getTodos=async（）=>{
试一试{
const res=等待获取（“http://localhost:3000/todos");
const jsonData=await res.json（）；
setTodos（jsonData？.data？.todos | | |[]）；
}捕捉（错误）{
log（“错误：”，err）；
}
};

我把变量拼错了。所以，问题是我在编写

jsonData.data.todos

而不是关闭

jsonData.data.todos

在抛出错误之前，控制台.log中出现了什么？看起来

jsonData.data.todos

可能未定义。（您也可以检查浏览器devtools的“网络”选项卡）尝试添加{todos&&todos.map（todo）=>}…感谢您的快速回复。所以，问题是我写的是

jsonData.data.todos

，而不是关闭

jsonData.data.todos

。我在这个简单的问题上浪费了1小时：，）

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;