React中POST请求后触发GET请求实现无刷新显示新增条目的方法

你这个问题本质是子组件操作完成后触发父组件的数据重新拉取，按下面几步改即可：

第一步：改造useAxiosGet自定义hook，暴露重新请求的方法 #

你当前的useAxiosGet应该仅在组件初始化时发一次GET请求，我们给它新增一个可手动触发刷新的refetch方法：

// useAxiosGet.js 改造后代码示例
import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';

export default function useAxiosGet(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 把请求逻辑封装为可复用方法，用useCallback缓存避免不必要的重渲染
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const res = await axios.get(url);
      setData(res.data);
      setError(null);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [url]);

  // 组件初始化时自动调用一次
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 向外返回refetch方法，外部可手动调用触发重新请求
  return { data, loading, error, refetch: fetchData };
}

第二步：修改App组件，把refetch方法通过props传递给ModalForm #

// App.js 修改后代码
const App = () => {
    // 解构拿到refetch方法
    const { data: books, loading, error, refetch: fetchBooks } = useAxiosGet(API_URL)
    // 其余原有代码

    return (
        // 其余原有渲染代码
        {/* 把刷新方法作为props传给子组件 */}
        <ModalForm onSubmitSuccess={fetchBooks} />
    );
}

第三步：修改ModalForm组件，post请求成功后调用父组件传入的刷新方法 #

// ModalForm.js 修改后代码
// 接收父组件传入的onSubmitSuccess props
const ModalForm = ({ onSubmitSuccess }) => {
    // 原有打开弹窗的逻辑代码

    function submit(e) {
        e.preventDefault();
        axios.post(API_URL, {
            name: data.name,
            description: data.description,
            count: data.count,
            imageURL: data.imageURL,
            price: data.price
        })
        .then(res => {
            console.log(res.data);
            // post成功后调用父组件传的刷新方法，触发GET请求更新列表
            onSubmitSuccess?.();
        })
        .catch((err) => {
            console.log(err);
        })
        setData({
            name: "",
            description: "",
            count: "",
            imageURL: "",
            price: ""
        })
    }

    function handle(e){
        const newData={...data}
        newData[e.target.id] = e.target.value
        setData(newData)
        console.log(newData)
    }

    return (// 原有渲染代码);
}

如果你不想每次新增都额外发一次GET请求，也可以在post成功后直接把后端返回的新条目加到父组件的books列表里，性能更高：

• 父组件把更新books列表的方法传给子组件
• post成功后拿到返回的新条目，直接调用该方法更新本地列表，无需再发GET请求

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