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

Question

我试图摆脱这个错误信息，但仍然没有成功。

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

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

Answer 1

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

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

Answer 2

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

<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调用的结果可用并且items状态更改为包含item key的对象，您将向input传递一个值，从而将其从非受控转换为受控，这就是警告的内容。为了避免警告，您只需初始化您的状态，如

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

或者使用输入比如

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