我是React.js库的新手,在浏览一些教程时,我偶然发现:
this.setState
this.replaceState
给出的描述不是很清楚(IMO)。
setState is done to 'set' the state of a value, even if its already set
in the 'getInitialState' function.
类似地,
The replaceState() method is for when you want to clear out the values
already in state, and add new ones.
我尝试了this.setState({data: someArray});
,然后是this.replaceState({test: someArray});
,然后是console.logged,我发现state
现在同时拥有data
和test
。
然后,我尝试了this.setState({data: someArray});
,然后是this.setState({test: someArray});
,然后对它们进行了console.logged,我发现state
同样同时具有data
和test
。
那么,这两者到底有什么区别呢?
发布于 2015-04-24 16:05:13
示例定义:
// let's say that this.state is {foo: 42}
this.setState({bar: 117})
// this.state is now {foo: 42, bar: 117}
this.setState({foo: 43})
// this.state is now {foo: 43, bar: 117}
this.replaceState({baz: "hello"})
// this.state. is now {baz: "hello"}
不过,请注意docs中的这一点:
setState()不会立即改变this.state,但会创建一个挂起的状态转换。在调用此方法后访问this.state可能会返回现有值。
replaceState()
也是如此
发布于 2016-03-14 22:02:34
根据docs的说法,replaceState
可能会被弃用:
此方法在扩展React.Component的ES6类组件上不可用。它可能会在React的未来版本中被完全删除。
发布于 2020-02-07 04:56:05
由于replaceState
现在已弃用,因此这里有一个非常简单的解决方法。尽管你可能很少会/应该求助于此。
要删除状态,请执行以下操作:
for (const old_key of Object.keys(this.state))
this.setState({ [old_key]: undefined });
或者,如果您不想多次调用setState
const new_state = {};
for (const old_key of Object.keys(this.state))
new_state[old_key] = undefined;
this.setState(new_state);
实际上,状态中以前的所有键现在都返回undefined
,可以很容易地使用if
语句对其进行过滤:
if (this.state.some_old_key) {
// work with key
} else {
// key is undefined (has been removed)
}
if ( ! this.state.some_old_key) {
// key is undefined (has been removed)
} else {
// work with key
}
在JSX中:
render() {
return <div>
{ this.state.some_old_key ? "The state remains" : "The state is gone" }
</div>
}
最后,要“替换”状态,只需将新的状态对象与已被undefined
的旧状态的副本组合在一起,并将其设置为状态:
const new_state = {new_key1: "value1", new_key2: "value2"};
const state = this.state;
for (const old_key of Object.keys(state))
state[old_key] = undefined;
for (const new_key of Object.keys(new_state))
state[new_key] = new_state[new_key];
this.setState(state);
https://stackoverflow.com/questions/23293626
复制相似问题