Tengo el componente de la App donde se muestra la lista de elementos y ModalForm donde puede agregar uno nuevo. Pero cuando agrego un nuevo elemento, tengo que volver a cargar la página para verlo en mi lista. Quiero activar de alguna manera mi método GET después de ejecutar mi método 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); }Debe usar React State para almacenar sus libros.
https://ar.reactjs.org/docs/estado-y-ciclo-de-vida.html
Hacer un estado para los libros
const App = () => { // Books storage. const [books, setBooks] = useState([]); }Haz una función que cargue los libros.
const App = () => { // Books storage. const [books, setBooks] = useState([]); // Load books const loadBooks = () => { const response = useAxiosGet(API_URL); setBooks(response ); } } Carga los libros cuando el componente se monta usando el gancho 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, []) } En su función de envío, después del éxito del envío, puede volver a llamar a loadBooks .
const submit = () => { ... .then(() => { loadBooks(); }) }