代码之家 › 专栏 › 技术社区 › Rachel

在反应方法中设置状态

reactjs javascript

Rachel · 技术社区 · 6 年前

我有一个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,并包含在assign inside setState()中;若要设置状态,我必须将e.target.value分配给status属性,如下所示:

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

4 回复 | 直到 6 年前

Shea 6 年前

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

this.state.filter[0].Status = e.target.value; 直接改变了状态。您直接为状态赋值,而不是使用提供的 setState() 功能。这违反了react的3个关键原则之一,如您收到的警告中所述。

另一件需要注意的事情是:status是一个保留字,所以不应该将它用作属性名。

也, this.state.filter[0].Status 意味着 this.state.filter 是一个数组,您正在更改属性 Status 它的第一个元素。除非 this.state.filter此.state.filter 需要保存多个元素/项,每个元素/项都有自己的元素/项 地位 财产,你可以把它作为 this.state.filter此.state.filter 是的。

如果这是有意的,那么可以将函数更改为:

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

Aliaksandr Sushkevich 6 年前

首先,需要创建现有数组的副本。

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

那你就可以把这个拷贝变异

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

然后可以使用setstate

this.setState({filter: filter})

Piyush Zalani 6 年前

而不是像这样直接分配:

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

你可以这样做。

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

Jonas Wilms 6 年前

其实有点复杂:

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

注:这是其中一种情况,我更喜欢简单而不是严格的状态转换,所以忽略警告;)