Question

我使用setState来改变组件的状态。

它工作正常，直到我需要从状态中删除元素。

让我假装我的商店有这个：

{
    0: {name: foo},
    1: {name: bar}
}

如果我添加另一个元素，它可以正常工作：

store[2] = {name: hohoho};
setState(store, console.log(this.state));

使用上面的代码，我最终得到了预期的状态：

{
    0: {name: foo},
    1: {name: bar},
    2: {name: hohoho},
}

但是如果我从商店中删除其中一个元素并再次更改状态，它就不会从状态中删除：

delete store[2]

如果我是console.log（商店），我得到：

{
    0: {name: foo},
    1: {name: bar}
}

然后：

setState(store, console.log(this.state))

给了我：

{
    0: {name: foo},
    1: {name: bar},
    2: {name: hohoho},
}

但比这更奇怪的是，如果我向商店添加另一个元素，并在以下后设置状态：

store[3] = {name: heyheyhey};
setState(store, console.log(this.state));

我最终得到以下状态：

{
    0: {name: foo},
    1: {name: bar},
    2: {name: hohoho},
    3: {name: heyheyhey}
}

即使console.log（商店）给了我以下内容：

{
    0: {name: foo},
    1: {name: bar},
    3: {name: heyheyhey}
}

有人可以帮助我了解最新情况吗？

修改

由于有些评论说删除可能是问题，我改变了我从商店删除的方式：

var temp = {};
for (var x in store) {
    if (x != id) {
        temp[x] = store[x];
    }
}
store= temp;

但我仍然遇到同样的问题。

Answer 1

我认为你错误地使用了第二个setState param .. 你应该知道：

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

和setState的第二个参数是回调：

此外，您可以提供一个可选的回调函数，该函数在完成setState并重新呈现组件后执行。所以你的回调应该是这样的：

setState(store, (newState) => console.log(newState);

或它的简短版本：

setState(store, console.log)

否则你只是记录当前的类状态并返回undefined作为第二个参数（回调）

Answer 2

回答我在评论中提到的问题。 Delete并没有释放内存，就像关键词让你认为它一样。

根据MDN Delete

与普遍看法不同，删除操作符与直接释放内存无关。内存管理是通过断开引用间接完成的

所以你要做的就是用一个新对象替换它而不是修改旧对象。

编辑：

尝试这样的事情

cloneObject(obj) {
        if (null == obj || "object" != typeof obj) return obj;
        var copy = obj.constructor();
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) {
                copy[attr] = obj[attr];
            }
        }
        return copy;
}

Answer 3

您可以使用int* a = new int[b]代替删除：

undefined

在此处试试：https://jsfiddle.net/jprogd/062z1kqd/2/

BTW执行const changes = [ { title: 'add 2', update: state => Object.assign({}, state, { 2: { name: 'hohoho' } }), }, { title: 'remove 2', update: state => Object.assign({}, state, { 2: undefined }), }, { title: 'add 3', update: state => Object.assign({}, state, { 3: { name: 'heyheyhey' } }), }, ]; class App extends React.Component { constructor(props) { super(props); this.state = { 0: { name: 'foo' }, 1: { name: 'bar' }, }; } update(step) { this.setState(changes[step].update); } componentDidMount() { setTimeout(this.update.bind(this, 0), 2000); setTimeout(this.update.bind(this, 1), 4000); setTimeout(this.update.bind(this, 2), 6000); } render() { return ( <pre> {JSON.stringify(this.state, null, 2)} </pre> ); } }时，实际上并未将整个状态设置为this.setState({ a: something })，而是仅更新某些属性（在此特定情况下，仅更新{ a: something }属性）。

反应不会覆盖状态

3 个答案: