React setState替换错误的值

时间:2016-07-05 01:55:34

标签: javascript reactjs ecmascript-6

这可能是一个非常愚蠢,引人注目的问题......

当我运行此代码(从复选框)时,它会替换“errors”列表以及“displayErrors”列表。我将列表保存在两个位置,以便我可以过滤,然后将原始列表恢复。

constructor(props) {
    super(props);

    this.state = { date: new Date(), errors: [], displayErrors: [], onlyErrors: false };
}

filterErrors() {
    // I would have placed a dataset in both "errors" and "displayErrors"

    console.log(this.state);

    let err = this.state.errors;
    err.Stock = [];

    this.setState({displayErrors: err });

    console.log(this.state);
}

3 个答案:

答案 0 :(得分:1)

它正在发生,因为数组是对象,当你将err.Stock设置为[]时,它实际上也将this.state.errors设置为[]。你需要以某种方式复制你的对象(不知道你的对象是什么,我可以帮助它)。

此外,在调用setState后,您不应该控制台记录状态,setState是异步的,因此日志可能会打印出新状态,也可能不打印出来。

答案 1 :(得分:0)

你在console.log(err.Stock)上看到了什么?在将它设置为空数组之前。我怀疑未定义。 Dot(“。”)语法用于访问对象的属性(行为或状态)。数组没有这样的属性,它是一组有序的对象。我怀疑你需要迭代你的数组并返回Stock对象(不知道如何在不知道更多关于Stock对象的情况下这样做)。然后将Stock对象设置为空数组。

答案 2 :(得分:0)

您需要使用Object.assign()组合当前错误:

从网站上取得的例子:

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.

Object.assign()会更改您作为参数包含的目标对象,因此我认为您需要执行的操作类似于Object.assign({}, error_lists, new_error),其中您的现有错误对象和新错误对象都添加了一个空对象创建一个新对象。

Click here for more info