Quiero que mi página React.js se vuelva a cargar después de presionar el botón Enviar. Esto se debe a que puse nuevas entradas en mi base de datos y una vez que el envío fue exitoso, quiero solicitar nuevos datos de la base de datos y mostrarlos.
import React, {useEffect, useState} from 'react'; import axios from "axios"; const Questionnaire = () => { const [questions, setQuestions] = useState({questions: []}); const [updated, setUpdated] = useState(false); // approach 1 // let updated = false // approach 2 const onSubmit = async (answeredQuestions) => { let data = Object.values(answeredQuestions) axios.put('http://localhost:8000/questionnaire/', data) .then(response => { // setUpdated(false); // approach 1 // updated = !updated; // approach 2 } ); }; useEffect( () => { axios.get('http://localhost:8000/questionnaire/', {}) .then((response) => { setQuestions({"questions": response.data}); setUpdated(true); // approach 1 }); }, [updated]); return ( <> <Questions questions={questions} onSubmit={onSubmit} /> </> ); } export default Questionnaire; Quiero que useEffect() se ejecute inmediatamente después de recibir la respuesta de axios.put() para que las nuevas preguntas se puedan solicitar y mostrar al usuario. Probé dos enfoques, pero axios.get() se ejecutó dos veces o la nueva representación no funcionó correctamente.
¡Aprecio tu apoyo!
Respuesta actualizada.
Parece que su lógica para el enfoque 1 no es completamente correcta. Prueba esto en su lugar
import React, {useEffect, useState} from 'react'; import axios from "axios"; const Questionnaire = () => { const [questions, setQuestions] = useState({questions: []}); const [updated, setUpdated] = useState(true); // Set to true to trigger get on first render const onSubmit = async (answeredQuestions) => { let data = Object.values(answeredQuestions) axios.put('http://localhost:8000/questionnaire/', data) .then(response => { setUpdated(true); // approach 1 } ); }; useEffect( () => { if (updated) { axios.get('http://localhost:8000/questionnaire/', {}) .then((response) => { setQuestions({"questions": response.data}); setUpdated(false); // approach 1 }); } }, [updated]); return ( <> <Questions questions={questions} onSubmit={onSubmit} /> </> ); } export default Questionnaire;Respuesta antigua:
¿Hay alguna razón por la que necesite obtener datos en un useEffect ? ¿O podría simplemente hacer la solicitud de obtención cada vez que se resuelva la opción de venta?
import React, {useEffect, useState} from 'react'; import axios from "axios"; const Questionnaire = () => { const [questions, setQuestions] = useState({questions: []}); const onSubmit = async (answeredQuestions) => { let data = Object.values(answeredQuestions) axios.put('http://localhost:8000/questionnaire/', data) .then(response => { axios.get('http://localhost:8000/questionnaire/', {}) .then((response) => { setQuestions({"questions": response.data}); }); } ); }; return ( <> <Questions questions={questions} onSubmit={onSubmit} /> </> ); } export default Questionnaire;(O hágalo con async/await ya que está declarando que onSubmit es una función asíncrona)
Usa location.reload(); después de que la solicitud de venta/publicación finalice como se muestra a continuación
import React, {useEffect, useState} from 'react'; import axios from "axios"; const Questionnaire = () => { const [questions, setQuestions] = useState({questions: []}); const [updated, setUpdated] = useState(false); // approach 1 // let updated = false // approach 2 const onSubmit = async (answeredQuestions) => { let data = Object.values(answeredQuestions) axios.put('http://localhost:8000/questionnaire/', data) .then(response => { //The below line will force browser refresh location.reload(); } ); }; .... //the rest of the codes