Question

想要添加电影并将其推送到Movie课程内的数组中。当我运行它时，我收到了这个警告：

index.js：2178警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的使用寿命期间使用受控或不受控制的输入元件。更多信息：https://reactjs.org/docs/forms.html#controlled-components      在输入中（在index.js：41）
     标签中的
（在index.js：39）

表格（在index.js：38）
     电影中的
（在index.js：50）

class Movie extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.state = {list: []};//this line shows a waring    

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.addMovie = this.addMovie.bind(this);

  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A movie was submitted: ' + this.state.value);
    event.preventDefault();
    this.addMovie();

  }

  addMovie(value){      
    this.setState({ list: [...this.state.list, value] });       
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label> 
          Movie name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" /> 
      </form>
    );
  }
}

ReactDOM.render(
  <Movie />,
  document.getElementById('root')
);

Answer 1

构造函数中不能有多个this.state

  constructor(props) {
    super(props);
    this.state = {value: '',list: []};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.addMovie = this.addMovie.bind(this);

  }

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '', list: [] };
  

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.addMovie = this.addMovie.bind(this);

  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    //alert('A movie was submitted: ' + this.state.value);
    event.preventDefault();
    this.addMovie();

  }

  addMovie() {
    let value = this.state.value;
    this.setState({ list: [...this.state.list, value],value: '' });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
      
          Movie name: 
          <ul>
            {this.state.list !== [] && this.state.list.map((row, i) => <li key={i} >{row}</li>)}
          </ul>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Answer 2

this.state = {value: ''};
this.state = {list: []};

您的代码首先要求我的state对象拥有属性value的状态。然后使用键list重新分配新的状态对象并替换旧状态。这是错误的，您应该在单个state对象中定义多个属性，如下所示

this.state = {value: '', list: []}

添加到数组

2 个答案: