React中AddTask提交后如何触发兄弟组件TaskList即时刷新

当前任务列表数据仅在<Home />组件首次挂载时通过useFetch拉取一次，<AddTask />把新任务提交到后端成功后，没有触发父组件更新任务数据的逻辑，<TaskList />拿到的始终是首次加载的旧数据，只能靠整页刷新重新触发初始请求才能看到新内容。

两个组件是兄弟节点，共同父组件是<Home />，用状态提升+回调传参的方式成本最低，不需要引入额外库。

1. 改造useFetch自定义钩子，暴露手动刷新方法 #

原钩子只支持组件挂载时自动发请求，需要把请求逻辑抽离成可单独调用的方法，对外暴露：

import { useState, useEffect } from 'react';

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [isPending, setIsPending] = useState(true);
    const [error, setError] = useState(null);

    // 抽离独立的请求方法
    const fetchData = () => {
        setIsPending(true);
        fetch(url)
            .then(res => {
                if (!res.ok) throw new Error('请求失败');
                return res.json();
            })
            .then(resData => {
                setData(resData);
                setError(null);
                setIsPending(false);
            })
            .catch(err => {
                setError(err.message);
                setIsPending(false);
            })
    }

    // 组件挂载时自动请求一次
    useEffect(() => {
        fetchData();
    }, [url])

    // 把请求方法返回，供外部手动触发刷新
    return { data, isPending, error, fetchData };
}

export default useFetch;

2. 改造Home组件，传递刷新回调给AddTask #

注意原代码漏了AddTask的导入，记得补上：

import AddTask from "./AddTask";
import TaskList from "./TaskList";
import useFetch from "./useFetch";

const Home = () => {
    // 拿到手动刷新的方法
    const { data: task, isPending, error, fetchData } = useFetch('http://localhost:8000/tasks');

    return (
        <div className="home">
            {/* 提交成功后要执行的刷新方法通过prop传入 */}
            <AddTask onTaskAdded={fetchData} />
            { error && <div>Failed to fetch data.</div> }
            { isPending && <div>Loading...</div> }
            { task && <TaskList task={task} /> }
        </div>
    );
}
 
export default Home;

3. 改造AddTask组件，提交成功后触发列表刷新 #

import { useState } from 'react';

// 接收父组件传入的提交成功回调
const AddTask = ({ onTaskAdded }) => {
    const [task, setTask] = useState("");
    const [isPending, setIsPending] = useState(false);

    const handleSubmit = (e)=> {
        e.preventDefault();
        setIsPending(true);
        const newTodo = { task };

        fetch('http://localhost:8000/tasks', {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(newTodo)
        })
        .then(()=>{
            setIsPending(false);
            setTask(""); // 提交成功清空输入框
            // 调用回调，触发父组件重新拉取最新任务列表
            onTaskAdded?.();
        })
        .catch(() => {
            setIsPending(false);
            // 可自行添加提交失败的提示逻辑
        })
    };

    return ( 
        <form className="new-task" onSubmit={handleSubmit}>
            <input className="input" 
                type="text" 
                required
                value={task}
                onChange={(e)=> setTask(e.target.value)} 
            />
            {isPending 
                ? <button className="add-task" disabled>提交中...</button>
                : <button className="add-task">Add</button>
            }
        </form>
    );
}
 
export default AddTask;

改完之后，点击Add按钮提交新任务成功后，会自动触发Home组件重新拉取最新的任务列表，TaskList会自动拿到新数据渲染，不需要刷新页面。

如果后续项目组件嵌套层级很深，逐层传回调太繁琐，可以根据需求选以下方案：

• 用React Context在顶层维护任务状态，所有需要操作任务的组件直接从Context取值、调用更新方法
• 引入轻量状态管理库（比如Zustand）统一管理全局任务数据
• 后端支持的话用WebSocket/SSE做数据推送，任务变更时后端主动把最新列表推到前端，自动更新

小提示：如果不想提交成功后重新发一次GET请求，也可以在POST请求的返回值里拿到后端返回的新任务对象，直接把这个对象拼接到现有任务列表里更新状态，能省一次请求，逻辑和上面的方案类似，把拼接新数据的方法传给AddTask即可。

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