如何使孩子通过其他儿童行为重新渲染？

Question

我有一个类似

的应用程序

export default function App(props) {
    return <>
        <FooList />
        <hr/>
        <CreateFoo />
    </>;
}

我的FooList是一个类似的课程

export default class FooList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            foos = []
        };
    }

    componentDidMount() {
        Axios.get('/getFooListPath').then(res=>{
            this.setState({foos=> res.data});
        }).catch(err=>{
            console.log(err);
        });
    }

    render() {
        const mapedFoos = this.state.foos.map((foo, i)=><li key={i}>foo</li>);
        return <ul>mapedFoos</ul>;
    }
}

和CreateFoo就像

export default function CreateFoo(props) {
    const [txt, setTxt] = useState("");
    const handleChange = (event) => setTxt(event.target.value);
    const handleChange = () => {
        Axios.post("/createFooPath", txt).then(res=>{
            // TODO : maybe calling some method here
        }).catch(err=>{
            console.log(err);
        });
    };
    return <>
        <input type="text" onChnage={handleChange} />
        <button onClick={handleClick} >create</button>
    </>;
}

问题是我想在成功创建foo之后重新渲染FooList。

我已经考虑过将foos移到父App，并将其作为道具发送到FooList。但是我想使FooList与父项独立，因此无论我在哪里使用它，它都会向我显示数据库中的当前foos