Question

我有一个React组件，该组件将值（e）传递到过滤器中，e始终是以下值之一：{true，false，SHOW_ALL}。

filterItem(e) {  
    this.state.filter[0].Status = e.target.value;
    this.setState({
         filter: this.state.filter
    });
 }

React抱怨我正在直接修改状态。收到此警告：请勿直接更改状态。使用setState（）

我不知道如何将过滤器状态设置为e.target.value，并将其包含在setState（）内部的分配中；要设置状态，我必须将e.target.value分配给Status属性，如下所示：

 this.state.filter[0].Status = e.target.value;

Answer 1

filterItem(e) {
    this.setState({
        filter: e.target.value
    });
}

this.state.filter[0].Status = e.target.value;直接改变状态。您正在直接为状态分配一个值，而不是使用提供的setState()函数。如您得到的警告所述，这违反了React的3个关键原则之一。

要注意的另一件事：状态是保留字，因此您不应将其用作属性名称。

此外，this.state.filter[0].Status意味着this.state.filter是一个数组，并且您正在更改其第一个元素的属性Status。除非this.state.filter需要包含多个元素/项目，每个元素/项目都具有自己的Status属性，否则您可以将其保留为this.state.filter。

如果这是故意的，则可以将功能更改为此：

filterItem(e) {
    this.setState({
        filter: [{Status: e.target.value}]
    });
}

Answer 2

首先，您需要创建现有阵列的副本

const filter = [...this.state.filter]

然后您可以对该副本进行

filter[0].Status = e.target.value;

然后您可以使用setState

this.setState({filter: filter})

Answer 3

而不是像这样直接分配它：

this.state.filter[0].Status = e.target.value;

您可以执行以下操作。

this.setState({filter: [{status: e.target.value}] })

Answer 4

实际上有点复杂：

this.setState(previous => ({
     filter: [{
        ...previous.filter[0],
        Status: e.target.value
     }].concat(previous.filter.slice(1))
}));

PS：这是其中一种情况，如果我更喜欢简单性而不是严格的状态转换，那么就忽略警告吧；）

在React方法中设置状态

4 个答案: