如何使用Axios更新对象数组中的布尔值（React+Node.js Todo场景）

后端（Node.js）改造 #

你当前只有创建Todo的POST接口，要修改任务状态需要新增一个更新接口（推荐用PUT，符合RESTful规范）：

// 新增PUT接口，根据ID更新任务状态
app.put('/Todo/:id', function(req, res) {
  // 把URL参数里的ID转成时间戳（和你存储时的new Date()类型匹配）
  const todoId = Number(req.params.id);
  // 在lists数组中定位目标任务
  const targetTodo = lists.find(item => Number(item.id) === todoId);
  
  if (targetTodo) {
    // 直接更新status为true，也可以改成接收前端传的参数实现双向切换
    targetTodo.status = true;
    res.status(200).json(targetTodo);
  } else {
    res.status(404).json({ message: '未找到该Todo任务' });
  }
});

如果需要支持勾选/取消勾选双向切换，可以把更新逻辑改成动态接收前端传的status值：

targetTodo.status = req.body.status;

前端（React.js）实现 #

在Todo列表组件中，给每个复选框绑定onChange事件，触发时调用Axios发送更新请求并同步本地状态：

import axios from 'axios';
import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]); // 存储所有Todo任务的本地状态

  // 处理复选框勾选事件
  const handleTodoCheck = (todoId) => {
    axios.put(`/Todo/${todoId}`, { status: true })
      .then(response => {
        // 更新本地状态，替换已修改的任务
        setTodos(prev => prev.map(todo => 
          Number(todo.id) === Number(todoId) ? response.data : todo
        ));
      })
      .catch(err => console.error('更新状态失败:', err));
  };

  return (
    <div className="todo-list">
      {todos.map(todo => (
        <div key={todo.id} className="todo-item">
          <input
            type="checkbox"
            checked={todo.status}
            onChange={() => handleTodoCheck(todo.id)}
          />
          <span>{todo.toDo}</span>
        </div>
      ))}
    </div>
  );
}

export default TodoList;

如果要支持双向切换，修改事件处理逻辑即可：

const handleTodoCheck = (todoId, currentStatus) => {
  axios.put(`/Todo/${todoId}`, { status: !currentStatus })
    .then(response => {
      setTodos(prev => prev.map(todo => 
        Number(todo.id) === Number(todoId) ? response.data : todo
      ));
    });
};

然后在复选框的onChange中传入当前状态：

onChange={() => handleTodoCheck(todo.id, todo.status)}

补充提示 #

你当前用内存数组lists存储数据，服务重启后数据会丢失，若需要持久化可以改用文件存储或轻量数据库（比如SQLite、MongoDB）。

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