在 React.js 中重新加载页面 onSubmit

Question

我希望我的 React.js 页面在点击提交按钮后重新加载。这是因为我将新条目放入数据库中，一旦提交成功，我想从数据库中请求新数据并显示它们。

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;

我希望在收到axios.put() 的响应后立即执行useEffect()，以便可以请求新问题并将其显示给用户。 我尝试了两种方法，但要么axios.get() 执行了两次，要么重新渲染没有正常工作。

感谢您的支持！

Answer 1

在put/post请求完成后使用location.reload();，如下所示

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

Answer 2

更新答案。

您对方法 1 的逻辑似乎并不完全正确。试试这个

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;

---

旧答案：

有什么理由需要在useEffect 中获取数据吗？或者您可以在解决 put 时简单地执行 get-request 吗？

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;

（或者使用 async/await 来实现，因为您将 onSubmit 声明为异步函数）