React实战笔记之创建组件再次新增清空状态

背景

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

举个例子

为了形象地说明这个问题，举个例子吧，比如现在有一个需求：用一个列表来展示学生信息，并且可以新增学生信息。

可以看出这是一个简单的CRUD需求。学生列表只是一个获取数据然后渲染的过程，没什么可以说的，列表中加一个新增按钮，点击按钮路由跳转到新增页面。大致代码如下：

新增学生的代码如下：

问题

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

如何清空状态？

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

具体代码如下：

这次终于美化了下代码