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

Posted 2023-03-17

【中文标题】在 React.js 中重新加载页面 onSubmit

【英文标题】：Reload page onSubmit in React.js

【发布时间】：2022-01-08 11:42:19

【问题描述】：

我希望我的 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() 执行了两次，要么重新渲染没有正常工作。

感谢您的支持！

【参考方案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

【讨论】：

location.reload() 的问题在于它会重置来自useContext() 的会话数据，这不是这里的意图......仍然感谢您的建议，在大多数情况下它可能是一个解决方案。

【参考方案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 声明为异步函数）

【讨论】：

我使用useEffect()的原因是我希望在开始时（在第一次提交之前）从后端请求一次问题。这就是为什么我在调用中使用另一个 setUpdated() 以便在收到问题后重新呈现。

查看我的更新答案。这对你有用吗？

不，这不会改变任何事情。据我所知，useEffect() 依赖项是在变量更改时触发的，不是基于布尔值是 true 或 false 的事实，所以我的方法没有区别。

对update 的更新是一个变量更改。变量的值已从 true 变为 false（或相反）。我在useEffect 中添加了一个 if。这仍然不适合您吗？现在具体是什么不工作？

这真是奇怪的事情。我也想知道，为什么变量更改不会导致重新渲染。抱歉，我没有看到 useEffect() 中的 if 语句。但这并不影响结果，因为useEffect() 钩子甚至没有被第二次触发。但是，我找到了解决方法。我使用<Redirect />-component 重定向到另一个页面，该页面会将其重定向回 Questionnaire 组件。至少这会导致页面重新加载，即使它不是一个漂亮的解决方案。