不要直接改变状态，在 React JS 中使用 setState() react/no-direct-mutation-state答案

【问题标题】：Do not mutate state directly, Use setState() react/no-direct-mutation-state in React JS不要直接改变状态，在 React JS 中使用 setState() react/no-direct-mutation-state
【发布时间】：2017-09-27 06:11:45
【问题描述】：

<input
  defaultValue={this.props.str.name}
  ref={(input) => { this.state.name = input; }}
  name="name"
  type="text"
  className="form-control"
  onChange={this.handleInputChange}
/> 

handleInputChange(event) {
  this.setState({
    [event.target.name]: event.target.value
  });
}

if(this.state.name.value === "") {
  this.msg.show('Required fields can not be empty', {
    time: 2000,
    type: 'info',
    icon: <img src="img/avatars/info.png" role="presentation"/>
  });
}

我正在尝试像这样设置默认值，并且也想访问它。我确实喜欢这个并使用this.state.name.value 访问了该值，但事情是它的工作，但显示警告为

不要直接改变状态，使用 setState() 反应/无直接突变状态。

【问题讨论】：

你读过错误吗？不要直接修改状态对象，除非在构造函数中，使用this.setState({ name: input });
"但是如果用户更改字段的值，我会使用那个东西" handleInputChange(event) { this.setState({ [event.target.name]: event.target.value }); }

标签： reactjs eslint

【解决方案1】：

得到“不要直接改变状态，使用 setState()”，为什么？

因为，你在 ref 回调方法中改变状态值来存储节点 ref，这里：

this.state.name = input;

解决方案：

不要使用状态变量来存储引用，可以直接存储它们在组件实例中，因为这不会随着时间而改变。

根据DOC：

状态包含特定于该组件的可能更改的数据随着时间的推移。状态是用户定义的，它应该是一个普通的 JavaScript 对象。

如果你不在 render() 中使用它，它不应该在 state 中。为了例如，您可以将计时器 ID 直接放在实例上。

由于您使用的是 controlled input element，因此不需要 ref。直接使用this.state.name与输入元素值属性和this.state.name访问值。

使用这个：

<input
    value={this.state.name || ''}
    name="name"
    type="text"
    className="form-control"
    onChange={this.handleInputChange} 
/>

如果您想使用ref，则直接将引用存储在实例上，删除 value 属性，您也可以删除 onChange 事件，像这样使用它：

<input
    ref={el => this.el = el}
    defaultValue={this.props.str.name}
    name="name"
    type="text"
    className="form-control"
/>

现在使用这个ref 来访问这样的值：

this.el.value

【讨论】：

【解决方案2】：

您可以改为在 with spread 运算符中克隆整个属性值，然后重新修改或编辑该值，例如：

state = {Counters: [{id:1,value:1},{id: 2,value: 2},{id: 3,value: 3},{id: 4,value: 4}]}
increment = (Counter) => {

        //This is where the state property value is cloned 

        const Counters = [...this.state.Counters];
        console.log(Counters);
        const index = Counters.indexOf(Counter)
        Counters[index].value++
        this.setState({
            Counters: this.state.Counters
        })
}

【讨论】：