Here is my api file:

import axios from "axios";

const taskApi = axios.create({
  baseURL: "http://localhost:8000/tareas/api/v1/tareas/",
});

export const getTasks = () => taskApi.get("/");

export const createTask = (task) => taskApi.post("/", task);

export const deleteTask = (id) =>
  axios.delete(`http://localhost:8000/tareas/api/v1/tareas/${id}/`);

now here is the component that displays all of my tasks:

import React from 'react'
import { useEffect, useState } from 'react'
import { getTasks } from '../api/task.api'
import { TaskCard } from './TaskCard'

export function TaskLists() {
    const [tasks, setTasks] = useState([])

   useEffect(() => {
     async function loadTasks() {
        const res = await getTasks();
        console.log(res.data)
        setTasks(res.data);
     }
     loadTasks();
   },[]);

  return (
    <div>
        {tasks.map((task) => (
            <TaskCard key={task.id} task={task} />
        ))}
    </div>
  )
}

and here is my TaskCard component that is causing the error:

import React, { useState } from 'react'
import { deleteTask } from '../api/task.api'

export function TaskCard({task}) {
    const [tasks, setTasks] = useState([]);

    const handleDelete = async (id) => {
        await deleteTask(id);
        setTasks(tasks.filter(task => task.id !== id));
    }

    return (
        <div>
                <h1>{task.title}</h1>
                <p>{task.description}</p>
                <hr/>
                <button onClick={() => handleDelete(task.id)}>Delete</button>
        </div>
    )
}

I am getting the error :

settle.js:19 Uncaught (in promise)

When I press the delete button I want that the task card immediately gets deleted from the screen

CodePudding user response：

You are doing that in reverse order. The error you're getting is due to that you are calling setTasks in your handleDelete function without updating the state correctly. In your TaskCard component, you're trying to update tasks, but it's not defined in the state of the TaskCard component.

You should update the tasks in the TaskLists component instead.

TaskLists.js (updated)

import React from 'react';
import { useEffect, useState } from 'react';
import { getTasks, deleteTask } from '../api/task.api';
import { TaskCard } from './TaskCard';

export function TaskLists() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    async function loadTasks() {
      const res = await getTasks();
      setTasks(res.data);
    }
    loadTasks();
  }, []);

  const handleDelete = async (id) => {
    await deleteTask(id);
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div>
      {tasks.map((task) => (
        <TaskCard key={task.id} task={task} onDelete={handleDelete} />
      ))}
    </div>
  );
}

TaskCard.js (updated)

import React from 'react';

export function TaskCard({ task, onDelete }) {
  return (
    <div>
      <h1>{task.title}</h1>
      <p>{task.description}</p>
      <hr />
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </div>
  );
}

Hope you understood and got solved.