Reactjs 从 React 中的sibling 组件刷新组件

在Home组件中，需要tasks状态，以便可以在AddTask组件中更新该状态

Home

import TaskList from "./TaskList";
import useFetch from "./useFetch";
import { useState, useEffect } from 'react'

const Home = () => {
    const [tasks, setTasks] = useState(null);
    const { data: task, isPending, error} = useFetch('http://localhost:8000/tasks');
    useEffect(() => {
        if (task) setTasks(task)
    }, [task])

    return (
        <div className="home">
            <AddTask setTasks={setTasks} />
            { error && <div>Failed to fetch data.</div> }
            { isPending && <div>Loading...</div> }
            { tasks && <TaskList task={tasks} /> }
        </div>
    );
}
 
export default Home;

AddTask

const AddTask = ({ setTasks }) => {
    const [task, setTask] = useState("");
    const [isPending, setIsPending] = useState(false);

    const handleClick = (e)=> {
        e.preventDefault();
        setIsPending(true);
        const todo = {task};

        fetch('http://localhost:8000/tasks', {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(todo)
        })
        .then(()=>{
            setIsPending(false);
            setTasks(prev => ([...prev, task]))
        })

    };

    return ( 
    
        <form className="new-task" onSubmit={handleClick}>
            <input className="input" 
                type="text" 
                required
                value={task}
                onChange= { (e)=> setTask(e.target.value) } 
            />
            <button className="add-task">Add</button>
        </form>
        
    );
}
 
export default AddTask;