我们的 React 站点有几个组件/页面，基本上是 CRUD 处理的： 从用户那里收集几个字段，并在提交时将这些字段存储为数据库记录。 今天的问题是，用户可以填写多个字段，将这些值存储在 State 中，然后如果他们出于任何原因调整屏幕大小，则会丢失所有内容。 显然，"调整大小"自动包括"刷新"。
我们希望新的CSS生效(例如，移动与桌面的媒体查询(。 但我们不希望 State 中的所有值都被清除，屏幕重置为开头。
有可能得到我们想要的吗？
典型的字段是
<TextInput
className={"required"}
id="firstName"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
placeholder="First Name"
labelText="First Name"
invalid={this.state.firstNameInvalid}
invalidText="First Name is required"
将输入值放入状态的句柄更改为：
handleChange(event) {
const {name, value} = event.target
this.setState({[name]: value})
}
状态中的值工作正常，直到以任何方式更改窗口大小：最大化/最小化/拖动，将移动设备从垂直转向水平等。 在这种情况下，它的行为就像您进行了手动浏览器刷新一样：所有状态将返回到初始值。
我们正在考虑的一个线索是，我们正在使用 react-sidenav 库和 react-router。 这两种情况都会导致这样的事情吗？
仅供参考，我们找到了罪魁祸首。 在我们的包装导航.js中，使用 react-sidenav，有一个调整大小处理程序将大小设置为 State。 通过设置状态，侧边导航将重新呈现。 当重新渲染时，嵌套在其中的 react-router 也会重新渲染，基本上会导致页面刷新。