React.js中的setState与replaceState

由于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，然后将其设置为state即可：

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);

根据docs，replaceState可能会被弃用：

此方法在扩展React.Component的ES6类组件上不可用。在以后的React版本中可能会完全删除它。

与setState当前和以前的状态合并。使用replaceState，它将抛出当前状态，并仅用您提供的状态替换它。通常setState使用该命令，除非出于某种原因确实需要删除密钥；但是将它们设置为false / null通常是更明确的策略。

虽然有可能改变。replaceState当前使用传递的对象作为状态，即replaceState(x)，一旦被设置this.state === x。它比轻一些setState，因此如果成千上万的组件频繁设置其状态，则可以将其用作优化。
_{我用这个测试用例断言了这一点。}

---

如果您的当前状态是{a: 1}，并且您打电话this.setState({b: 2}); 当应用状态时，它将为{a: 1, b: 2}。如果你打电话，this.replaceState({b: 2})你的状态将是{b: 2}。

旁注：状态不是立即设置的，因此this.setState({b: 1}); console.log(this.state)在测试时不要这样做。