创建组件再次新增清空状态

创建组件再次新增清空状态

技术杂谈小彩虹2021-07-09 21:56:1870A+A-
说明
这是我的 react 实战笔记之一,后续还会更新,更多内容请点击 博客

背景

最近在开发的时候总会遇到这样一个问题:一个列表组件中引入了一个新增组件,点击列表组件的新增按钮,弹出来新增窗口,新增结束之后再次新增,发现窗口还是填写了之前的内容。

举个例子

为了形象地说明这个问题,举个例子吧,比如现在有一个需求:用一个列表来展示学生信息,并且可以新增学生信息。
可以看出这是一个简单的CRUD需求。学生列表只是一个获取数据然后渲染的过程,没什么可以说的,列表中加一个新增按钮,点击按钮路由跳转到新增页面。大致代码如下:

image

新增学生的代码如下:

image

问题

这样实现很快就会暴露问题,新增一次之后再次新增就会发现表单里面的数值还被填充了上次的值。也就是说组件的状态不会被清空。

如何清空状态?

我看了几个解决方案,有一个方案比较不错,大致思路就是,在 class 外面有一个初始化的state,在组件的初始化的时候把该状态赋值给组件 state,当离开组件的时候再次把该状态赋值给 state。
具体代码如下:

image


点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们