删除组件时React状态异常：点击删除按钮无法即时移除任务卡片

核心问题 #

1. 状态管理混乱：TaskCard组件自己维护了空的tasks状态，删除操作只修改这个局部状态，完全影响不到父组件TaskLists中控制页面渲染的tasks数组，所以卡片无法即时移除。
2. 未处理Promise错误：handleDelete里的await deleteTask(id)没有错误捕获逻辑，API请求失败时会抛出未捕获的Promise错误，也就是你看到的settle.js:19 Uncaught (in promise)报错。
3. API调用冗余：deleteTask没有复用已创建的taskApi实例，重复写全量URL容易出错且不易维护。

分步修复 #

1. 优化API文件，复用taskApi实例

修改task.api.js中的deleteTask方法，直接用已配置好的taskApi：

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);

// 改用taskApi，避免重复拼接baseURL
export const deleteTask = (id) => taskApi.delete(`${id}/`);

2. 父组件TaskLists接管删除逻辑，维护状态

让父组件负责状态更新，给子组件传递删除回调：

import React, { 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();
    },[]);

    // 父组件定义删除逻辑：调用API后更新本地状态
    const handleTaskDelete = async (id) => {
        try {
            await deleteTask(id);
            // 用函数式更新确保拿到最新的tasks数组，过滤掉被删除的项
            setTasks(prevTasks => prevTasks.filter(task => task.id !== id));
        } catch (err) {
            // 捕获错误并打印，也可以添加用户提示
            console.error('删除任务失败:', err);
        }
    }

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

3. 简化TaskCard组件，移除无用状态

子组件只负责展示内容和触发删除回调，不需要自己维护tasks状态：

import React from 'react'

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

修复后效果 #

点击删除按钮时，会触发父组件的handleTaskDelete：

1. 先请求API删除后端数据
2. 成功后立即更新父组件的tasks数组，页面会自动移除对应的任务卡片
3. 即使API请求失败，也会捕获错误，不会出现Uncaught Promise错误，同时可以根据需求添加用户提示

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