Как обновить список пунктов To-Do с чекбоксами и сохранить изменения с помощью React и Django?

Я пытаюсь обновить список дел, используя React для фронтенда и Django для бэкенда. Каждый пункт имеет флажок, чтобы отметить его как завершенный или незавершенный. Когда я нажимаю кнопку «Сохранить», я хочу, чтобы обновленные данные были отправлены на бэкенд через PUT-запрос. Однако у меня возникают проблемы с правильным обновлением элементов.

Вот моя функция React handleSave, которая запускает PUT-запрос:

    const handleSave = async (e) => {
      e.preventDefault();
      console.log('handleSave called');

      const updatedItems = items.map((item) => {
        const checkbox = e.target[`c${item.id}`];
        console.log(`Processing item id ${item.id}, checkbox value:`, checkbox?.checked);
        return {
          id: item.id,
          todolist: 1,
          text: item.text,
          complete: checkbox ? checkbox.checked : false,
          duration: item.duration,
        };
      });

      try {
        console.log('Payload to send:', updatedItems);
        const response = await axios.put(
          `${import.meta.env.VITE_API_URL}/todo-items/1`, // Update the endpoint if needed
          updatedItems,
          {
            headers: { 'Content-Type': 'application/json' }, // Set proper headers
          }
        );
        console.log('Items updated successfully:', response.data);
      } catch (error) {
        console.error('Error updating items:', error.message, error.response?.data);
      }
    };

Вот представление Django, обрабатывающее запрос:

@api_view(['GET', 'PUT'])
def todo_items(request, id):
    try:
        ls = ToDoList.objects.get(id=id)
    except ToDoList.DoesNotExist:
        return Response({"error": "List not found"}, status=404)

    if request.method == 'GET':
        incomplete_items = ls.item_set.filter(complete=False)
        complete_items = ls.item_set.filter(complete=True)
        items = incomplete_items.union(complete_items, all=True)
        serializer = ItemSerializer(items, many=True)
        return Response(serializer.data)

    if request.method == 'PUT':
        if not isinstance(request.data, list):
            return Response({"error": "Invalid data format, expected a list."}, status=400)

        errors = []
        for item_data in request.data:
            try:
                item = Item.objects.get(id=item_data["id"])
                item.complete = item_data["complete"]
                item.save()
            except ObjectDoesNotExist:
                errors.append({"id": item_data["id"], "error": "Item not found."})
            except KeyError:
                errors.append({"id": item_data.get("id", None), "error": "Missing fields."})

        if errors:
            return Response({"message": "Partial update completed with errors.", "errors": errors}, status=207)

        return Response({"message": "Items updated successfully!"})

прямо сейчас полезная нагрузка составляет {id: 1, todolist: 1, text: 'отвечать на письма', complete: false, duration: '02:00:00'} 1 : {id: 2, todolist: 1, text: 'мыть посуду', complete: false, duration: '00:30:00'} 2 : {id: 3, todolist: 1, text: 'закончить домашнее задание по химии', complete: false, duration: '03:00:00'} 3 : {id: 4, todolist: 1, text: 'накрыть на стол', complete: true, duration: '00:05:00'} 4 : {id: 5, todolist: 1, text: 'clean the table', complete: true, duration: '00:05:00'} 5 : {id: 7, todolist: 1, text: 'съесть апельсины', complete: true, duration: '03:00:00'} длина : 6» и это соответствует формату базы данных на стороне api, поэтому я не уверен, почему возникает ошибка

    PUT http://127.0.0.1:8000/api/todo-items/1 500 (Internal Server Error)
dispatchXhrRequest @ axios.js?v=48ceec0d:1653
xhr @ axios.js?v=48ceec0d:1533
dispatchRequest @ axios.js?v=48ceec0d:2008
_request @ axios.js?v=48ceec0d:2223
request @ axios.js?v=48ceec0d:2120
httpMethod @ axios.js?v=48ceec0d:2252
wrap @ axios.js?v=48ceec0d:8
handleSave @ App.jsx:46
processDispatchQueue @ react-dom_client.js?v=48ceec0d:11577
(anonymous) @ react-dom_client.js?v=48ceec0d:11988
batchedUpdates$1 @ react-dom_client.js?v=48ceec0d:2539
dispatchEventForPluginEventSystem @ react-dom_client.js?v=48ceec0d:11683
dispatchEvent @ react-dom_client.js?v=48ceec0d:14608
dispatchDiscreteEvent @ react-dom_client.js?v=48ceec0d:14589Understand this errorAI
App.jsx:55 Error updating items: Request failed with status code 500"

Вернуться на верх