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

Posted

技术标签:

【中文标题】在 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() 依赖项是在变量更改时触发的,不是基于布尔值是 truefalse 的事实,所以我的方法没有区别。 update 的更新是一个变量更改。变量的值已从 true 变为 false(或相反)。我在useEffect 中添加了一个 if。这仍然不适合您吗?现在具体是什么不工作? 这真是奇怪的事情。我也想知道,为什么变量更改不会导致重新渲染。抱歉,我没有看到 useEffect() 中的 if 语句。但这并不影响结果,因为useEffect() 钩子甚至没有被第二次触发。但是,我找到了解决方法。我使用&lt;Redirect /&gt;-component 重定向到另一个页面,该页面会将其重定向回 Questionnaire 组件。至少这会导致页面重新加载,即使它不是一个漂亮的解决方案。

以上是关于在 React.js 中重新加载页面 onSubmit的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React JS 中渲染之前等待状态?

在 React.js 中向下滚动页面时如何加载更多搜索结果?

React JS:图像大小在重新加载时闪烁,对象匹配:覆盖 CSS 属性

如何在 react.js 中的页面加载时显示引导模式?

在React.js应用上从firebase中获取和显示图片。

React js路由器在部署时无法通过url正确路由到页面