React输入框不再工作

我是新来的反应,当我改变我的状态从仅仅变量到一个对象,输入框不再工作。

以下代码有效

 class AddMovie extends Component {

  state = {
    title: "",
    watched: ""
  }

  onChangeMovie = (e) => {
    this.setState({[e.target.name] : e.target.value});
  }

  uploadMovie = (e) => {
    e.preventDefault();
    this.props.addMovie(this.state.title, this.state.watched);
    this.setState({title: "", watched: ""})
  }
  render(){
    return (
      <form onSubmit={this.uploadMovie}>
        <div className="form-group">
          <label>Movie Title</label>
          <input type="text" className="form-control"  placeholder="Enter title"
          name="title" value={this.state.title} onChange={this.onChangeMovie}/>
        </div>
        <div className="form-group">
          <label>Date Watched</label>
          <input type="date" className="form-control"
          name="watched" value={this.state.watched} onChange={this.onChangeMovie}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    )
  }
}

export default AddMovie;

  state ={
    movieUpload: {
      title: "",
      watched: ""
    }
  }

然后我更改表单以添加对象

  render(){
    return (
      <form onSubmit={this.uploadMovie}>
        <div className="form-group">
          <label>Movie Title</label>
          <input type="text" className="form-control"  placeholder="Enter title"
          name="title" value={this.state.movieUpload.title} onChange={this.onChangeMovie}/>
        </div>
        <div className="form-group">
          <label>Date Watched</label>
          <input type="date" className="form-control"
          name="watched" value={this.state.movieUpload.watched} onChange={this.onChangeMovie}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    )
  }

输入框不再工作。这是为什么,我该如何改变它?