不要直接改变状态,在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但事情是它的工作,但显示警告

不要直接改变状态,使用setState()react/no-direct-mutation-state.

Answer 1

获取"不要直接改变状态,使用setState()",为什么？

因为,您正在改变ref回调方法中的状态值来存储节点ref,在这里:

this.state.name = input;

解:

不要使用状态变量来存储引用,您可以直接将它们存储在组件实例中,因为它不会随时间而变化.

根据DOC:

状态包含特定于此组件的数据,该数据可能随时间而变化.状态是用户定义的,它应该是一个普通的JavaScript对象.

如果你不在render()中使用它,它不应该处于状态.例如,您可以将计时器ID直接放在实例上.

由于您使用受控输入元素,因此不需要ref.直接使用this.state.nameinput元素值属性并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