React中Map函数无法渲染任务列表的问题求助

核心问题梳理 #

1. Axios响应数据提取错误：直接把Axios返回的整个响应对象存入sundays state，但接口返回的任务数组实际在响应对象的data属性里。
2. 错误处理数组方式：用Object.keys(sundays)把数组转成了索引键名数组，遍历的是字符串索引而非任务对象，所以sunday.Task必然是undefined。
3. useEffect无限循环：依赖项设为sundays，每次更新sundays都会触发重新请求，导致无限调用接口。
4. State命名混淆：setSunday作为state变量名，和setter函数setSundayTask风格混乱，容易引发逻辑错误。

修改后的代码实现 #

1. 修正数据请求与State更新

async function getSundayTask() {
  // 提取Axios响应中的data字段，这才是接口返回的任务数组
  const response = await axios.get('http://localhost:5000/sunday');
  setSundayEntry(response.data);
}

// 修正useEffect依赖，仅组件挂载时请求一次数据
useEffect(() => {
  getSundayTask();
}, []); // 空数组表示只执行一次

// 移除不必要的Object.keys处理，直接使用sundays数组
// const sundaystodos = Object.keys(sundays); → 删掉这行

2. 修正JSX渲染逻辑

<div>
  <h1>Tasks:</h1>
  {/* 直接遍历sundays数组，每个元素是任务对象 */}
  {sundays.map((task, index) => (
    <li key={index}>
      {task.Task}
    </li>
  ))}
</div>

3. 可选：修正State命名（提升代码可读性）

// 把原来的setSunday（变量名）改成sundayTask，避免和setter混淆
const [sundayTask, setSundayTask] = useState({
  Task: "",
});

// 提交函数里同步修改引用
const newSunday = { ...sundayTask };

验证步骤 #

1. 打开控制台，查看sundays state是否已正确存储任务数组。
2. 检查组件渲染时，每个task对象是否包含Task属性。
3. 确认页面已显示对应的任务列表。

内容的提问来源于stack exchange，提问作者Susan