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

Question

<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 访问了该值，但事情是它的工作但显示警告为

Do not mutate state directly, Use setState() react/no-direct-mutation-state .

Answer 1

Getting "Do not mutate state directly, Use setState()", Why?

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

this.state.name = input;

解法：

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

根据DOC:

The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.

If you don’t use it in render(), it shouldn’t be in the state. For example, you can put timer IDs directly on the instance.

由于您使用的是 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 然后将 ref 直接存储在实例上，删除值属性你也可以删除 onChange 事件，像这样使用它：

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

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

this.el.value

Answer 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
        })
}

Answer 3

将您的第 3 行更改为

  ref={(input) => { this.setState({name: input}); }}

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

Do not mutate state directly, Use setState() react/no-direct-mutation-state in React JS

reactjs

eslint