reactjs - 不要直接改变状态，在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 与输入元素 value 属性和 this.state.name 来访问该值。

使用这个:

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

如果您想使用ref，则将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