javascript - 如何在 React POST 后触发 GET，以便在不重新加载页面的情况下显示新项目

Question

我有App显示项目列表的组件，ModalForm您可以在其中添加新项目。但是当我添加新项目时，我必须重新加载页面才能在我的列表中看到它。我想GET在执行我的方法后以某种方式触发我的POST方法。

**App.js**
const App = () => {
    let books = useAxiosGet(API_URL)
    //some code

    return (
        //some code
        <ModalForm />
    );
}

    **ModalForm.js**
    const ModalForm = () = > {
        //some logic for opening modal form

        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 => {
                // document.location.reload();
                // here I want to trigger GET
                console.log(res.data);
            })
            .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 (//some code);
}

标签： javascriptreactjsaxios

Answer 1

你应该使用 React State 来存储你的书。

https://ar.reactjs.org/docs/state-and-lifecycle.html

1. 为书籍创建一个状态

   const App = () => {
       // Books storage.
       const [books, setBooks] = useState([]);
   }
   

2. 制作一个加载书籍的功能。

   const App = () => {
       // Books storage.
       const [books, setBooks] = useState([]);
   
       // Load books
       const loadBooks = () => {
           const response =  useAxiosGet(API_URL);
           setBooks(response );
       }
   }
   

3. 当组件堆使用useEffect钩子时加载书籍。 https://ar.reactjs.org/docs/hooks-effect.html

   const App = () => {
       // Books storage.
       const [books, setBooks] = useState([]);
   
       // Load books
       const loadBooks = () => {
           const response =  useAxiosGet(API_URL);
           setBooks(response );
       }
   
       // Load books when component mount.
       useEffect(loadBooks, [])
   }
   

4. 在您的提交函数中，提交成功后，您可以loadBooks再次调用。

   const submit = () => {
       ...
       .then(() => {
           loadBooks();
        })
   }