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

小编典典

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

reactjs

<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。

阅读 481

2020-07-22

共1个答案

小编典典

得到“为什么不直接改变状态，请使用setState（）”，为什么？

因为，您要在ref回调方法中更改状态值以存储节点ref，因此：

this.state.name = input;

解：

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

根据 DOC ：

状态包含特定于此组件的数据，该数据可能会随时间变化。状态是用户定义的，应该是普通的JavaScript对象。

如果未在render（）中使用它，则它不应处于状态。例如，您可以将计时器ID直接放在实例上。

由于您使用的是
受控输入元素
，因此不需要ref。直接this.state.name与输入元素的value属性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

2020-07-22