时间戳

首页 > 解决方案 > 在 React 方法中设置状态

javascript - 在 React 方法中设置状态

问题描述

我有一个将值 (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;

标签： javascriptreactjs

解决方案

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

推荐阅读