React+Axios从Node获取对象数组及ESLint错误解决求助

错误原因拆解 #

• no-unused-vars：你代码里声明了tasks变量但没实际用到（大概率是在Axios请求里临时赋值了局部tasks，但没同步到React状态）
• no-undef：渲染列表时引用了tasks，但这个变量没在组件作用域里定义（要么忘了用useState声明状态，要么状态变量名写错了）

修复方案与完整代码 #

修复后的React前端代码 #

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Todo = () => {
  // 声明状态变量存储后端返回的任务列表
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // 异步获取任务数据
    const fetchTasks = async () => {
      try {
        // 调用Node后端接口
        const response = await axios.get('http://localhost:3001/api/tasks');
        // 直接把响应数据更新到状态，别搞多余的局部变量
        setTasks(response.data);
      } catch (error) {
        console.error('拿任务列表失败:', error);
      }
    };

    fetchTasks();
  }, []); // 空依赖数组保证只在组件挂载时执行一次

  return (
    <div className="todo-container">
      <h1>任务列表</h1>
      <ul>
        {/* 遍历状态里的tasks渲染列表 */}
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Todo;

关键修复点 #

1. 用useState正确声明tasks状态变量，确保组件内可以正常访问
2. Axios请求直接把响应数据传给setTasks，避免创建未使用的局部tasks变量
3. 渲染时直接用状态里的tasks，解决未定义的问题

Node.js后端接口示例（确保返回合法数组） #

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors()); // 允许跨域，React前端才能正常调用
app.use(express.json());

// 模拟任务数据
const tasks = [
  { id: 1, title: '完成React组件开发' },
  { id: 2, title: '调试Axios请求' },
  { id: 3, title: '修复ESLint错误' }
];

// 定义获取任务列表的接口
app.get('/api/tasks', (req, res) => {
  res.json(tasks);
});

const PORT = 3001;
app.listen(PORT, () => {
  console.log(`后端跑在http://localhost:${PORT}`);
});

验证步骤 #

1. 启动后端：执行node server.js（假设后端文件名叫server.js）
2. 启动React前端：执行npm start
3. 打开浏览器访问应用，就能看到后端返回的任务列表正常渲染，ESLint错误也会消失

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