不要直接改变状态，在React JS中使用setState（）react / no-direct-mutation-state [英] Do not mutate state directly, Use setState() react/no-direct-mutation-state in React JS

问题描述

 <输入
 defaultValue = {this.props.str.name} 
 ref = {（输入）=> ; {this.state.name =输入； }} 
 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（'必填字段不能为空'，{
时间：2000，
类型： info，
图标：< img src = img / avatars / info.png role = presentation /> 
} ）; 
} 
  

我正在尝试设置默认值并希望访问它也一样我确实喜欢这样，并使用 this.state.name.value 访问了值，但事情是这样的，但显示警告为

请勿直接更改状态，请使用setState（）
react / no-direct-mutation-state。

解决方案

获取不要直接更改状态，请使用setState（），为什么？

因为，您正在ref引用方法内部改变状态值以存储节点ref，因此：

  this.state.name =输入; 
  

---

解决方案：

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

根据 DOC ：

状态包含特定于该组件的数据，这些数据可能会随着时间的推移而改变
。状态是用户定义的，应该是普通的
JavaScript对象。

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

由于使用的是 受控输入元素 ，不需要引用。直接使用 this.state.name 和输入元素值属性以及 this.state.name 来访问值。 / p>

使用以下命令：

 <输入
 value = {this.state.name || ’’} 
 name = name 
 type = text 
 className = form-control 
 onChange = {this.handleInputChange} 
 /> 
  

如果您想使用 ref ，则进行存储直接在实例上引用，删除value属性，还可以删除 onChange 事件，使用它的方式如下：

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

现在使用此 ref 访问值像这样：

this.el.value

<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"/>
  });
}

I'm trying to set the default value like that and wanted to access it as well. I did like this and accessed the value with this.state.name.value but the thing is its working but showing the warning as

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

解决方案

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

Because, you are mutating the state value inside ref callback method to store the node ref, Here:

this.state.name = input;

---

Solution:

Don't use state variable to store the reference, You can directly store them in component instance because that will not change with time.

As per 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.

Since you are using controlled input element, ref is not required. Directly use this.state.name with input element value property and this.state.name to access the value.

Use this:

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

If you wanted to use ref then store the ref directly on instance, remove value property and you can remove the onChange event also, Use it like this:

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

Now use this ref to access the value like this:

this.el.value

这篇关于不要直接改变状态，在React JS中使用setState（）react / no-direct-mutation-state的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！