在使用axios的react中未正确传递编辑待办事项列表状态

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

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    try {
      const response = await axios.get('/api/todos');
      setTodos(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const handleEditTodo = async (id, newStatus) => {
    try {
      await axios.put(`/api/todos/${id}`, { status: newStatus });
      fetchTodos(); // 重新获取更新后的待办事项列表
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.title} - {todo.status}
            <button onClick={() => handleEditTodo(todo.id, 'completed')}>
              Mark as Completed
            </button>
            <button onClick={() => handleEditTodo(todo.id, 'incomplete')}>
              Mark as Incomplete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;