不要直接改变状态，使用setState()在React JS中进行状态变更。

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。

- Piyush

---

你读了错误吗？除了在构造函数中使用 this.setState({ name: input }); 之外，不要直接修改状态对象。 - Andrew Li

"但是如果用户更改了字段的值，我会使用这个东西" handleInputChange(event) { this.setState({ [event.target.name]: event.target.value }); } - Piyush

Answer 1

为什么会出现“不要直接修改state，使用setState()”的警告？

因为你正在突变状态值来存储节点引用，在这里：

this.state.name = input;

解决方案：

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

根据 文档：

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

如果您不在 render() 中使用它，则不应该在状态中使用它。例如，可以直接将计时器 ID 放在实例上。

由于您正在使用受控制的输入元素，因此不需要 ref。可以直接使用 input 元素的 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

- Mayank Shukla

Answer 2

将您的第三行代码更改为

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

- Anmol Shrivastav

---

你的回答可以通过解释为什么这个方法可以解决问题来改进。 - lmonninger

Answer 3

你可以使用展开运算符克隆整个属性值，然后重新构造或编辑该值，例如：

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

- Soumit Acharjee