Estoy escribiendo una página de React que muestra una lista de cuestionarios que una API externa está obteniendo. Al mismo tiempo, mi página tiene un botón "Nuevo cuestionario" que abre un cuadro de diálogo con un formulario para que el usuario configure y cree un nuevo cuestionario.

Aquí está el problema: no estoy seguro de cómo puedo hacer que mi tabla se vuelva a procesar una vez que se complete la solicitud POST. Después de jugar un poco con el segundo argumento de useEffect(), finalmente me enfrento a 2 escenarios:

1. La tabla se vuelve a renderizar después de POST, pero useEffect entra en un bucle infinito
2. useEffect no entra en bucle infinito, pero la tabla no se vuelve a renderizar

Aquí está mi código:

 const handleSubmit = () => { setLoading(true); const body = { name: newQuizName, collectionId: newQuizCollection, length: newQuizLength, estimator: newQuizEstimator, survey: newQuizSurvey } axios.post(quizzes_api, body).then(res => console.log(res)); fetchQuizzes(); resetDialog(); setLoading(false); } const quizzes_api = `http://localhost:5000/quizzes`; const pools_api = `http://localhost:5000/pools`; const fetchQuizzes = () => { axios.get(quizzes_api).then(res => setQuizzes(res.data)); } const fetchPools = () => { axios.get(pools_api).then(res => setPools(res.data)) } useEffect(() => { fetchQuizzes(); fetchPools(); }, [])

Dado que el segundo argumento utilizado aquí es [], es la versión que no se vuelve a procesar. He intentado poner [cuestionarios], lo que resuelve el problema en el front-end; pero mi servidor de matraz se inunda con solicitudes GET.

También notaré que esto es muy similar a la pregunta en este hilo: Reaccionar useEffect causó bucle infinito

Sin embargo, no puedo resolver el problema con la solución que se ofrece allí.

Cualquier idea será muy apreciada.