javascript - ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled - Stack Overflow

admin管理员组

文章数量:1201572

I am trying to get rid off this error message, but still unsuccessfully.

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.

There's also link to the Facebook page, but I am still not sure how to figure it out.

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

In the input seems to be always a not-null value, how do I fix this?

I am trying to get rid off this error message, but still unsuccessfully.

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.

There's also link to the Facebook page, but I am still not sure how to figure it out.

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

In the input seems to be always a not-null value, how do I fix this?

• javascript
• reactjs

Share Improve this question Follow edited Jul 18, 2018 at 18:32 Avinash 1,2431212 silver badges1919 bronze badges asked Jul 18, 2018 at 16:29 user2932090user2932090 33122 gold badges88 silver badges1717 bronze badges 1

• this.state.items.item is undefined until the first onChange event. You could change your initial state to this.state = {items: { item: '' } }; to get rid of the warning. – Tholle Commented Jul 18, 2018 at 16:33

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 23

In the state items is defined as a string, and hence when you assign the value to text input like

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

You are essentially writing

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

for the initial render, and once the result of API call is available and items state changes to an object that contains item key, you are passing a value to input and hence converting it from uncontrolled to controlled, which is what the warning is about. In order to avoid the warning, you would simply initilise your state like

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

or use input like

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

This type of warning mainly occurs in React when you try to set the undefined value to any of the input types. You can use a conditional operator to check whether the state value is undefined or not, if it is undefined set it to a null value.

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

本文标签：