React+Node Todo应用：点击按钮如何获取任务对象数组？

1. Node端修改：添加GET接口并处理跨域 #

首先解决跨域问题（React和Node服务端口不同会触发跨域），同时新增一个GET接口用于返回所有任务数组：

步骤1：安装并引入cors中间件 #

npm install cors

步骤2：修改Node代码 #

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

// 启用跨域支持
app.use(cors());
// 解析JSON格式的请求体
app.use(express.json());

const lists = [
    {toDo:"learn react"}
];

// 原有添加任务的POST接口
app.post('/Todo',function(req, res){
    lists.push({ "toDo":req.body.list});
    console.log(lists);
    res.status(200).send({ message: "Task added!!"});
});

// 新增获取所有任务的GET接口
app.get('/Todo',function(req, res){
    res.status(200).send(lists);
});

app.listen(8080, () => {
    console.log('Server running on port 8080');
});

2. React端修改：获取数据并渲染列表 #

添加状态存储任务列表，新增获取数据的逻辑，最后渲染任务：

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

function Todo() {
    const [toDos, setToDos] = useState('');
    // 新增状态存储任务列表
    const [taskList, setTaskList] = useState([]);

    // 获取任务列表的函数
    const fetchTodos = () => {
        axios.get('http://localhost:8080/Todo')
            .then(resp => {
                setTaskList(resp.data);
            })
            .catch(err => {
                console.log(err);
            });
    };

    // 组件加载时自动获取一次任务列表
    useEffect(() => {
        fetchTodos();
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        const request = { list: toDos };
        axios.post('http://localhost:8080/Todo', request)
            .then(resp => {
                alert(resp.data.message);
                setToDos('');
                // 添加任务后重新获取列表，保证数据同步
                fetchTodos();
            })
            .catch(err => {
                console.log(err);
            });
    };

    return (
        <div>
            <h1>ToDo List</h1>
            <form onSubmit={handleSubmit}>
                <input 
                    type="text" 
                    placeholder=" Add item..." 
                    name="list" 
                    value={toDos} 
                    onChange={(e) => setToDos(e.target.value)}
                />
                <button id="btn" type="submit">Add</button>
                {/* 可选：添加手动刷新按钮 */}
                <button type="button" onClick={fetchTodos}>刷新列表</button>
            </form>
            {/* 渲染任务列表 */}
            <ul>
                {taskList.map((task, index) => (
                    <li key={index}>{task.toDo}</li>
                ))}
            </ul>
        </div>
    );
}

export default Todo;

关键说明 #

• Node端的GET接口直接返回lists数组，React请求后就能拿到所有任务数据。
• React用taskList状态存储任务数组，通过map方法遍历渲染每个任务项（注意给每个列表项加唯一key，这里用index临时替代，实际项目建议使用唯一ID）。
• 组件挂载时自动调用fetchTodos，保证页面加载就显示现有任务；添加新任务后再次调用，确保列表实时更新。

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