javascript - 在 React 方法中设置状态

Question

我有一个将值 (e) 传递给过滤器的 React 组件，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 条关键原则之一。

还有一点需要注意:Status 是一个保留字，因此您不应该将它用作属性名称。

此外，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}]
    });
}