我正在尝试清除组件，state但找不到 es6 语法的参考。我正在使用：
this.replaceState(this.getInitialState());
但是这不适用于 es6 类语法。
我将如何达到相同的结果？
清除状态 es6 React
IT技术
javascript
reactjs
2021-04-14 16:11:14
6个回答
据我所知，React 组件不会保留初始状态的副本，因此您只需要自己完成即可。
const initialState = {
/* etc */
};
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = initialState;
}
reset() {
this.setState(initialState);
}
/* etc */
}
请注意，该行this.state = initialState;要求您永远不要改变您的状态，否则您会污染initialState并无法重置。如果无法避免突变，则需要initialState在构造函数中创建一个副本。（或initialState根据getInitialState().）
最后，我建议您使用setState()而不是replaceState().
问题
该接受的答案：
const initialState = {
/* etc */
};
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = initialState;
}
reset() {
this.setState(initialState);
}
/* etc */
}
不幸的是不正确。
initialState作为对 的引用传递this.state，因此每当您更改时，state您也会更改initialState（const在这里并不重要）。结果是你再也回不去了initialState。
解决方案
你必须深复制 initialState到state，然后它会起作用。要么自己写一个深拷贝函数，要么像这样使用一些现有的module。
这是作为函数实现的解决方案：
Class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = this.getInitialState();
}
getInitialState = () => ({
/* state props */
})
resetState = () => {
this.setState(this.getInitialState());
}
}
this.state直接涉及设置的解决方案在 React 16 中对我不起作用，所以这是我为重置每个键所做的：
const initialState = { example: 'example' }
...
constructor() {
super()
this.state = initialState
}
...
reset() {
const keys = Object.keys(this.state)
const stateReset = keys.reduce((acc, v) => ({ ...acc, [v]: undefined }), {})
this.setState({ ...stateReset, ...initialState })
}
首先，在使用componentWillMount()组件生命周期中的函数时，您需要存储初始状态：
componentWillMount() {
this.initialState = this.state
}
这会存储您的初始状态，并可用于在您需要时通过调用重置状态
this.setState(this.initialState)