ReactJS - 警告：组件正在更改要控制的文本类型的不受控制的输入答案

【问题标题】：ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlledReactJS - 警告：组件正在更改要控制的文本类型的不受控制的输入
【发布时间】：2018-07-18 16:29:12
【问题描述】：

我正在尝试摆脱此错误消息，但仍然没有成功。

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

还有指向 Facebook 页面的链接，但我仍然不知道如何弄清楚。

class EditItem extends Component {
    constructor(props) {
        super(props);
        this.state = {items: ''};

        this.addItemService = new ItemService();
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){
    axios.get('http://localhost:3005/items/edit/'+this.props.match.params.id)
    .then(response => {
      this.setState({ items: response.data });
    })
    .catch(function (error) {
      console.log(error);
    })
  }

  handleChange = (e) => {
    let items = Object.assign({}, this.state.items);    //creating copy of object
    items.item = e.target.value;                        //updating value
    this.setState({items});
  }

  handleSubmit(event) {
    event.preventDefault(); // not sure why this
    this.addItemService.updateData(this.state.items.item, this.props.match.params.id); // service for updating the data
    this.props.history.push('/index'); // redirect
  }

  render() {
    return (
          <div className="container">
            <form onSubmit={this.handleSubmit}>
              <label>
                Edit Item:
                <input type="text" value={this.state.items.item} className="form-control" onChange={this.handleChange}/>
              </label><br/>
              <input type="submit" value="Update" className="btn btn-primary"/>
            </form>
        </div>
    );
  }
}

在输入中似乎总是一个非空值，我该如何解决这个问题？

【问题讨论】：

this.state.items.item 是 undefined，直到第一个 onChange 事件。您可以将初始状态更改为 this.state = {items: { item: '' } }; 以消除警告。

标签： javascript reactjs

【解决方案1】：

在状态中，项目被定义为字符串，因此当您将值分配给文本输入时，例如

<input type="text" value={this.state.items.item} className="form-control" onChange={this.handleChange}/>

你实际上是在写作

<input type="text" value={undefined} className="form-control" onChange={this.handleChange}/>

对于初始渲染，一旦 API 调用的结果可用并且项目状态更改为包含项目键的对象，您将向输入传递一个值，从而将其从不受控转换为受控，这就是警告是关于。为了避免警告，您只需像

一样初始化您的状态

this.state = {items: { items: '' }};

或使用类似的输入

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

【讨论】：

在搜索了一个小时左右的类似主题之后，这是唯一一个非常中肯的评论！谢谢，终于明白了！
我遇到了这个问题，因为我正在使用具有 value 和 onChange 的功能组件。将 setQuestion(e.target.value)} label="Question" /> 更改为 setQuestion(e.target.value)} label="Question" /> 。通过添加 || '' 值消除错误，这是什么巫术？

【解决方案2】：

当您尝试将未定义的值设置为任何输入类型时，这种类型的警告主要发生在 React 中。您可以使用条件运算符检查状态值是否未定义，如果未定义则将其设置为空值。


<input type="text" value={this.state.items.item !== undefined ? this.state.items.item :  ''} className="form-control" onChange={this.handleChange}/>

【讨论】：