如何在reactjs中返回到以前的状态？
在ReactJS中，返回到以前的状态通常涉及到状态管理和组件生命周期的概念。以下是一些常见的方法和技巧：
基础概念
- 状态管理：React组件通过
state来管理内部数据。当状态改变时，组件会重新渲染。 - 组件生命周期：React组件有一系列的生命周期方法，可以在组件的不同阶段执行代码。
相关优势
- 灵活性：React的状态管理机制使得组件可以灵活地响应数据变化。
- 性能优化：通过合理管理状态，可以避免不必要的渲染，提高应用性能。
类型
- 类组件：使用
this.state和this.setState来管理状态。 - 函数组件：使用
useState和useReducer等Hooks来管理状态。
应用场景
- 表单输入：用户输入数据后，需要回退到之前的输入状态。
- 页面导航：在页面之间切换时，需要恢复之前的状态。
问题与解决方法
问题：如何在React中返回到以前的状态？
原因
当用户进行某些操作（如表单输入、页面导航）后，可能需要返回到之前的状态。
解决方法
- 使用
useState和useEffectHooks - 使用
useState和useEffectHooks - 使用
useRef来保存历史状态 - 使用
useRef来保存历史状态
参考链接
通过以上方法，你可以在ReactJS中有效地管理和返回到以前的状态。
相关·内容
我的应用程序有两个页面，第一个是主页，它是一个用ajax加载的项目列表，支持分页。单击列表中的某个项目时，它将呈现一个新页面，显示项目的详细信息。我正在使用react-router，它工作得很好。
但是，当我按下back按钮时，我将返回到主页，所有以前的状态都丢失了，我不得不再次等待ajax加载，并且也丢失了分页。
那么，我如何改进这一点，让页面作为一个普通的(当您按下按钮，您可以立即返回到以前的状态，即使在相同的滚动位置)，谢谢。
浏览 2提问于2015-04-04得票数 4
回答已采纳
1回答
我已将应用程序添加到IOS的主屏幕上。
现在，当我从主屏幕打开它，做一些事情，然后完全关闭它(也是在多任务处理中)，然后从主屏幕再次打开它，我会看到前面的屏幕具有以前的反应状态。
当用户从主屏幕打开PWA以恢复某些状态时，如何通知我？
我可以通过监听focus或visibilitychange事件来获得它，但是它们也是在浏览器选项卡切换中触发的。
浏览 0提问于2019-08-10得票数 0
回答已采纳
我有一个母版页。在此页面中有一个列表和一个加载更多按钮。最初，应用程序显示100个项目。用户每次单击load more按钮时，都会加载100多个项目，并将它们附加到列表中。列表可以变得非常长，如果有很多项目，用户可以滚动很长时间。
当滚动时，用户可以点击任何项目，它会转到一个详细页面。然后，详细信息页面需要显示有关该项目的一些信息。在这个页面上也应该有一个后退按钮。当按下后退按钮时，它需要返回到母版页，但母版页需要与转到详细页之前的外观完全相同。它应该有相同的滚动位置和所有相同的项目，以前加载在那里。这就是问题所在，因为我无法做到这一点。
我试过使用react-router，但当导航到新的路线
浏览 7提问于2019-03-27得票数 1
回答已采纳
我有组件A和组件B。在组件A中，用户可以将过滤器应用到元素列表中，并使用侧栏在两个组件之间导航。每当用户单击进入B，并返回到A时，过滤器就会被设置回初始状态。保存组件A状态的最佳方法是什么，这样当他们回到组件A时，他们会看到他们最初应用的所有过滤器。
浏览 0提问于2018-12-10得票数 3
回答已采纳
我是应用程序开发方面的初级学生。我刚刚尝试在react原生小项目中注销。然后，在我单击注销按钮后，当我单击后退按钮(Android设备按钮)时，它会再次转到以前的屏幕。当然，API不起作用。在这种情况下，我如何防止返回到以前的屏幕？
logout = async () => {
await AsyncStorage.removeItem('userToken');
this.props.navigation.navigate('WelcomePage')
}
浏览 0提问于2020-04-08得票数 0
目前我正在学习反应。我想将我以前的数据和即将出现的数据存储在usestate中。有什么诡计吗？
例如， :首先输入"A“，然后输入"B”。我希望A和B被存储在usestate中，即使我在其中添加了新的数据
浏览 10提问于2022-06-18得票数 1
回答已采纳
有没有程序可以偶尔保存我的源码树的状态，让我很容易地返回到以前的状态？我想象着守望者和一些脚本或程序的组合，但找不到它。
浏览 0提问于2018-05-23得票数 0
1回答
我有一个带有几个TextView元素的活动，其中包括一些按钮。当单击一组特定TextView元素的按钮时，将启动一个新活动来输入一些数据。然后，这些数据被返回给特定的TextView元素。
我的问题是，当我为不同的TextView元素集选择另一个按钮时，新活动显示为输入数据，新数据返回到主活动，但以前输入的数据消失了。
如何防止以前输入的数据被删除？
浏览 4提问于2013-07-22得票数 0
2回答
例如，我在视图中的TextView中有一个很长的文本，所以这是一个场景：
我在屏幕里，我已经滚动到文本的某个地方
比回到以前的屏幕，做一些其他的工作人员在应用程序
也不愿回到屏幕上
因此，我想打开我的最新位置，我已经达到了滚动。
浏览 4提问于2017-02-15得票数 1
开始买了一个月的期限，速度还是非常快。后来续费了3年，感觉速度马上就没以前那么给力了。怎么回事？查询一个表 只有5条数据，20个字段，查询10次，有6次是延迟20多秒才返回数据的。以前都是秒返的。查询单个字段还是比较快的。
浏览 466提问于2016-11-19
1回答
做为开发者的我 申请了腾讯云推广，给客户做的项目让客户自己购买服务器 但是最后 肯定需要帮客户搭建程序，不可避免的会有IP重叠的情况 ，这种情况在阿里云是不存在，人家该返佣返佣，没想到来腾讯云第一次推广 就吃了亏，能否人工处理一下返佣订单？
浏览 328提问于2019-03-28
我有表格，提交后用户将被带到另一个页面。如果他们单击browser go back按钮，他们将返回到表单，但是输入数据不再存在。
恢复输入数据的正确方法是什么？
表格：
export default class Update extends React.Component{
constructor(){
super();
this.state = {
items: {
firstName: '',
lastName: '',
浏览 2提问于2016-06-07得票数 0
回答已采纳
我正在学习ReactJS，当我点击按钮时，我正试图将一个简单的Hello返回到我的DOM中。
此外，控制台中没有返回错误，单击时，我的console.log()将返回正确的值。
const Button = () => {
function handleCLick() {
console.log('Active')
return <h1>Hello World</h1>
}
return (
<button onClick={handleCLick}>Clique aqui</button&
浏览 21提问于2022-04-08得票数 0
1回答
我有一个长页内置的reactjs (SPA)。它有很多链接。当用户向下滚动并单击其中一个链接时，将呈现新页面。
这一切都很好，但是当用户点击返回按钮(浏览器)时，先前的长页面会重新呈现并返回到顶部。
是否有任何简单的解决方案，以确保使用到完全相同的一段页面，他上次点击？
浏览 1提问于2015-07-22得票数 0
回答已采纳
3回答
我有两个分支-发展和掌握。我经常在dev分支上工作，而母版是完全不必要的代码，与dev分支完全不同。
如何将从开发到硕士的所有东西都转移到老主人身上，使其一去不返？
浏览 1提问于2019-05-30得票数 0
回答已采纳
1回答
新的reactjs，并希望浏览器返回到以前的状态。但它似乎只是回到了前一页。 package.json： "react": "16.11.0",
"react-dom": "16.11.0",
"react-loader-spinner": "^3.1.5",
"react-promise-tracker": "^2.1.0",
"react-redux": "7.1.1",
"react-router": "
浏览 11提问于2020-03-26得票数 0
1回答
撤消已提交的更改
、、、
我从一本叫做‘says教程的书中学到，它说：
在撤消更改之前，我们需要返回到主分支。如果我们不这样做，我们所有的更新都将在某个不存在的分支上。您不应该直接对以前的修订版进行更改。
什么意思？
在我的例子中，我处于master分支的顶端，我必须恢复到以前的提交
浏览 4提问于2017-12-18得票数 0
回答已采纳
我有一个具有多种形式的向导，在向导的末尾，我想把它们带回到第一步。但是，每个表单都使用前面的值填充。
我只想卸下和重装它来擦拭一切干净。我该如何在反应中做到这一点？
<StepWizard>
<Step>
<NewComponent/>
</Step>
<Step>
<NewComponent/>
</Step>
<Step>
<
浏览 0提问于2018-06-22得票数 0
回答已采纳
try-with-resource语句可以推断λ的类型。
try (Closeable 最後に実行 = () -> System.out.print("終了")) {
System.out.println("開始");
}
但是enhanced-for语句不能。
Iterator<String> 繰り返し = Arrays.asList("いち", "に", "さん").iterator();
for (String 文字列 : () -> 繰り返し) // compile er
浏览 0提问于2017-06-28得票数 3
是否有可能在OCaml的中重新加载模块
在处理OCaml代码时，我的开发工作流程如下所示：
首先，在Vim中打开一个文件example.ml并对其进行黑客攻击。切换到另一个终端并运行utop。从utop内部加载带有指令#use "example.ml";;的代码。
回到Vim，并对代码进行一些更改。在更改代码之后，我想玩一下新的更改。返回到utop并重新运行指令#use "example.ml"。
如果有一个#reload指令来重新加载以前加载的所有模块，那就太好了，但是似乎没有。有什么方法可以轻松地重新加载所有以前加载的模块吗？
理想情况下，这将类似于GHCi
浏览 2提问于2017-09-04得票数 25
2回答
我试图将以下代码返回到屏幕上。所有操作都很好，但我无法将从JobDisplayFunction返回的数组由其父函数返回，从而返回到render()中。
async renderJobs(){
//do stuff
this.apiclient.getJobsByEmployer('', async (error, returnVal) => {
var job = returnVal
console.log('job')
console.log(job) //prints
console.log('retur
浏览 3提问于2017-11-27得票数 1
回答已采纳
我只是在玩ReactJS，试图用useState钩子找出一些奇怪的行为。
如果状态设置为与以前相同的原语值(布尔值)，则不应重新呈现组件。
const useScroll = ({positionToCross = 10}) => {
const window = useWindow();
const [isPositionCrossed, setIsPositionCrossed] = useState(window.scrollY > positionToCross);
useEffect(() => {
const onSc
浏览 3提问于2021-12-31得票数 5
回答已采纳
我正在使用South进行迁移。我似乎不知道South是否也可以用来修改模型本身。在返回到以前的模型状态时，我是否需要手动更改代码？
谢谢
浏览 3提问于2012-08-17得票数 1
回答已采纳
我跟踪。
我要做的是，在第一步中，选择一个元素，将其存储在我的状态中，在最后一步中，将所有数据存储在console.log中。此外，用户还可以从最后一步到第一步，更改他以前选择的内容。但问题是，我无法保存用户第一次选择的内容。
例如，如果用户选择第二个步骤，然后在最后一个步骤中返回，那么第一个步骤将显示为selected。我怎么才能解决这个问题？
这是我的密码
App.js
const [current, setCurrent] = useState(0);
const [data, setData] = useState({
firstName:
浏览 7提问于2022-02-07得票数 1
1回答
我有一个模态，输入字段在模态中。它有第一个输入字段名为add id。它的工作原理是，如果这个id存在于后端，我将在另外两个输入字段中得到名称和职业。这段代码运行良好。但每次我打开我的模态。我想要模态的重置状态，而不是以前的状态。为此，我将使用功能组件。不知道如何重置模态状态。不可能共享完整的代码，因为它的复杂性，但共享一些代码，如果有人可以帮助我。那就太好了。
const handleIdValidation = () => {
//handle the code after user enters the id
};
<Modal (it contains props
浏览 3提问于2020-08-21得票数 0
2回答
我有一个列表视图，其中每个项目都有一个链接到它的复选框。当我选中该复选框并返回到以前的活动时，我会得到选定的结果，但当我返回到列表视图时，以前选中的项目不会显示为选中。如果有人知道如何做到这一点，请让我知道。谢谢。
浏览 5提问于2014-09-11得票数 1
1回答
我做了一个小游戏，当你靠近某个物体时，如果用户按下一个特定的键，它就会改变场景，在那个场景中，有一个返回到主场景的选项，但当它返回到主场景时，它会回到原来的位置，而不是以前的位置。当玩家返回到他在前一个位置产生的主场景时，我该如何处理？
提前谢谢。
浏览 5提问于2020-05-26得票数 0
当我在Eclipse的调试器中运行代码时，它会跳到我设置的各个断点，但是当我终止调试会话时，它不会返回到以前的代码编辑位置。如何使它在调试会话后返回到我正在工作的位置？
浏览 0提问于2015-11-18得票数 0
2回答
现在，我们正在通过存储在服务器上的app发布我们的Android应用程序。我们有保存所有发布的apk的想法，这样如果我们发布了一个新的更新，然后意识到有一个主要的问题，我们可以切换到以前的apk版本。又快又轻松。
例如
Release 1: Version Name = 1.0.0 and Version Code = 1
Release 2: Version Name = 1.0.1 and Version Code = 2
假设第2版有问题，最好回到第1版，而不是等待1.0.2。问题是，当用户下载并安装该较旧的apk时，由于版本代码较低，它将不会安装。
是否有更好的方法来处理这个问题，而不
浏览 2提问于2014-11-18得票数 1
回答已采纳
我刚接触ReactJS，但我有一个简单的用例:我有一个登录表单，用于设置用户的状态(全名等)。然后我使用React路由器browserHistory.push('/')返回主页。我可以确认，如果我停留在登录页面，我的状态实际上得到了保存，但是当我回到主页，进入我的“父”组件(App.js)，并在render方法之前运行以下代码：
console.log(this.state) // this returns null
它总是返回true。我的构造函数甚至没有对状态做任何事情。如果我在我的App.js父组件的构造函数中放入一个日志，我可以验证页面实际上并没有被重新加载，该组件只被
浏览 0提问于2016-05-31得票数 1
1回答
我有一个超过80个输入域的长表单。提交后，它可以正常工作，并将数据保存在neo4j数据库中。我需要有‘保存草稿’功能，以防用户以后想要填写表单。我如何实现它？ 编辑： 我正在尝试将表单数据(包括空输入字段)保存到neo4j数据库中。 我在构造函数中有一个数组和一个形式： constructor(props){
super(props);
this.state = {
mydata: {
data1: {},
data2: {},
}
浏览 60提问于2021-11-15得票数 0
回答已采纳
以前我认为ASCII：：string只能支持C++字符集。对于其他字符集，例如法语、日语字符，将需要编码例如UTF-8/UTF-16。 我刚刚尝试了下面的代码，看起来C++ std::string已经支持日语和法语了。Guess还支持所有其他语言。 这怎么会发生呢？这是否意味着我们只需要std::string来处理所有人类语言？ string s;
s = "今年１年の世相を４字で振り返る恒例の「創作四字熟語」の優秀・入選５０作品を発表した";
string t;
t = "Vélo, sac, appareil photo: bleu en un «Klein
浏览 44提问于2018-12-17得票数 3
1回答
我正在尝试弄清楚如何在我的数组中一次只显示一项，然后使用to按钮单击back和fourth。目前，如果数组中有4个项目，那么所有4个项目都会显示在页面上。但我想一次只显示一个，然后返回到后退和第四次单击它们。我已经使用钩子构建了它。 下面是我当前的代码： <div>
{[...Array(stepBlock)].map((e, i) =>
<div className={'stepBlock'} key={i}>
<div>{details[i].name}</div>
</div&g
浏览 31提问于2021-04-08得票数 0
回答已采纳
我只想问一问，怎样才能解决这个问题？对不起，我没有足够的ReactJS知识，我们有一个项目。(因为我们只在T_T课程上自学，这对我来说真的很难，但我们需要它来完成项目)
我的问题是，每次我去另一个页面，它将重置反之亦然。
当我去
列出导航并添加一些任务，然后当我转到
Pomodo timer Nav，然后再回到待办事项列表
它将重置待办事项列表导航的内部。当我添加一些任务并更改计时器的时间时，它将保持不变。
浏览 8提问于2022-10-30得票数 1
1回答
下面是我的场景：
我从分支A(源)到分支B(目标)进行了合并。该合并执行了我必须签入的分支B中的未决更改(例如，changeset 1000)。然后，我在Test环境中构建并发布了分支-B，以测试它，我意识到有些地方出了问题。我认为罪魁祸首是合并，所以我决定回退以前的合并(changeset 1000)。这个回滚执行挂起的更改，我不得不再次签入这些更改(changeset 1001)到分支-B。现在，在调查了很多之后，我发现合并(changeset 1000)不是罪魁祸首，所以现在我想撤销合并的回滚(changeset 1001)并返回到changeset 1000。下面是例子。
B分部历史：
浏览 0提问于2020-02-06得票数 1
回答已采纳
1回答
我有这个
- Ajax回调：
success:function(data) {
self.setState({
user: {
id_user: data.session.id_user,
firstname_user: data.session.firstname_user,
lastname_user: data.session.lastname_user,
a
浏览 0提问于2017-02-26得票数 1
通常，我发现自己翻阅我的代码，并希望回到我以前的立场，在我最后一次滚动。
我想返回到我目前正在处理的代码中的前一个特定位置/滚动位置，而不仅仅是以前的.m或.h。
有办法吗？
浏览 1提问于2013-11-21得票数 0
回答已采纳
3回答
Reactjs后台处理
、、、
几个问题：
我有客户端应用程序上的组件列表，其中有一些近乎实时的信息，例如状态，我想要显示。
我有服务器应用程序，可以从第三方REST端点拉取状态信息。
我的问题是，我是否应该遍历客户端应用程序中的所有组件，并向服务器应用程序请求状态？
或者我应该有一个服务器工作线程，它提取状态信息并在websocket上发布，然后客户端可以更新组件的状态。
或者有后台线程，我可以在客户端应用程序上运行，它将更新状态和状态。这将如何与来自用户交互的事件的分派/排队冲突。
我想我可能问了一些架构问题，答案可能是“视情况而定”模棱两可，但任何以前做过这件事并提供任何指导的人都会很感激。
谢谢，Rajesh
浏览 2提问于2017-05-13得票数 1
我希望将所选项的着色保持在状态中，但是，当更改页面(Ex:从1到2并返回到1)时，它将失去着色，并且当默认状态开始为false时，会发送请求从useEffect中的状态中删除所有项。
是过滤每页10个项目，而且当我更改页面时，显然状态重置并从头开始，即使页面上有选定的项。
类型
type ISkySelected = {
id: string
}
interface ISkusProps {
id: string
description: string
code_sap: string
stock_pe: string
stock_atc: s
浏览 6提问于2022-03-25得票数 1
回答已采纳
2回答
如何保存活动状态( B) ，当移动到前一个活动(A)时，以及当移回(到活动B)时如何恢复它以前的状态？
场景
用户可以更改活动B的内容。完成工作后，所执行的更改可以是持久化(例如，保存到本地DB)。在持久化之前，用户可能希望导航到以前的活动。此时，“工作会话”应该以某种方式将临时保存在内存中。回到活动B之后，“工作会话”应该恢复，这样用户就可以继续工作了。
逼近
标准方法onCreate(Bundle)和onSaveInstanceState(Bundle)用于在设备配置更改时(例如，在旋转时)恢复/保存活动状态。作为，当活动被销毁时，这个方法不会在“回压”上被调用(默认情况下，finish(
浏览 7提问于2017-07-24得票数 2
我在呈现中使用了一个开关复选框，因此要检测它是否为checked的一个重要属性是defaultChecked。我在componentWillReceiveProps中设置了以前的状态。我首先尝试将状态作为属性，但是当它用Unexpected token编译代码时，会得到一个错误的babel.js。在我尝试使用dangerouslySetInnerHTML之后，它仍然无法工作(底部错误)。
第一次尝试：
<input type="checkbox" name="onoffswitch" {this.state.required} />
App.jsx
浏览 6提问于2017-08-17得票数 4
回答已采纳
在emacs中是否存在退出模式并返回到以前模式的键绑定？例如，假设我使用以下命令进入行号模式：
Alt+x linum-mode
如何快速禁用此模式并返回到以前所处的模式(不再使用相同的命令)？
浏览 0提问于2013-10-19得票数 2
回答已采纳
1回答
我正在使用UI-路由器在我的应用程序中有一些“菜单”。
$stateProvider.state("list"
url: "/Focales"
templateUrl: "/demo/focals.html"
controller: FocalCtrl)
$stateProvider.state("collection"
url: "/Collections"
templateUrl: "/demo/collections.html"
contro
浏览 0提问于2013-11-10得票数 3
回答已采纳
0回答
1、有效订单105，其中小于40的有两单，老客户有单 所以满足额外任务的订单 应该是105-2-1=103单才对呀，为啥显示的结果是92个
2、另外2月推广规则中，老客户返佣是10%，并没有说明轻量应用服务器不在返佣范畴内,为啥我的老客户下单都是无效订单
浏览 85提问于2022-02-22
1回答
我已经创建了一个返回产品列表的web应用程序。在此页面上，用户可以搜索一系列不同的搜索条件。
一旦用户搜索并将结果返回到页面上的表中，用户就可以编辑产品了。然而，在返回到产品列表页面时，页面只是重新加载，并再次显示所有产品。
我想知道保留搜索结果的最好方法是什么，并且在返回到搜索页面时，它会保留以前的标准。
我在stack exchange上发现了一些帖子- -可能是更好的帖子之一。
有没有人知道我如何保持搜索条件，这样当用户返回到搜索页面时，以前的搜索条件和结果保持不变。
非常感谢。
浏览 0提问于2012-09-11得票数 2
回答已采纳
1回答
我有WPF应用程序，在保持实际大小的同时，我希望从Maximized更改为Normal。但是有一个问题--由于某种原因(可能是默认行为)，切换到Normal状态后，窗口总是有1px边框厚度。我可以在将BorderThickness设置为Normal之后手动分配窗口的Normal属性来修复这个问题，但是它会导致可见的闪烁。此外，如果从普通回退到Maximized，然后再回到法线，即使以前设置为0，窗口仍然会获得边框厚度。
在切换到Normal时，是否有方法删除获取边框厚度的默认行为？
浏览 0提问于2018-03-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
