在 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()
依赖项是在变量更改时触发的,不是基于布尔值是 true
或 false
的事实,所以我的方法没有区别。
对update
的更新是一个变量更改。变量的值已从 true 变为 false(或相反)。我在useEffect
中添加了一个 if。这仍然不适合您吗?现在具体是什么不工作?
这真是奇怪的事情。我也想知道,为什么变量更改不会导致重新渲染。抱歉,我没有看到 useEffect()
中的 if 语句。但这并不影响结果,因为useEffect()
钩子甚至没有被第二次触发。但是,我找到了解决方法。我使用<Redirect />
-component 重定向到另一个页面,该页面会将其重定向回 Questionnaire 组件。至少这会导致页面重新加载,即使它不是一个漂亮的解决方案。以上是关于在 React.js 中重新加载页面 onSubmit的主要内容,如果未能解决你的问题,请参考以下文章
在 React.js 中向下滚动页面时如何加载更多搜索结果?
React JS:图像大小在重新加载时闪烁,对象匹配:覆盖 CSS 属性