React待办事项列表显示待办事项onChange，而不是onSubmit

Question

我对React有点陌生，通过所有新的编程努力，我正在构建一个todo应用程序。一切似乎都很正常，除了一个问题:当我在输入字段中输入一个待办事项并单击“提交”时，待办事项会被推入我的数组中，但是它不会立即显示出来。只有当我更改输入中的文本时，才会显示待办事项。我猜这与handleChange函数而不是handleSubmit函数上发生的呈现有关。任何帮助都将不胜感激。

下面是我的AddTodo组件

import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      array: []
    };

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

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

  handleSubmit(event) {
    event.preventDefault();
    var array = this.state.array
    array.push(this.state.value);
    console.log(array)
  }

  render() {
    return (
      <div>
        <form>
          <label>
            Name:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input onClick={this.handleSubmit} type="submit" value="Submit" />
       </form>
       <List array={this.state.array}/>
       </div>
     );
   }
 }

和my List组件

import React, { Component } from 'react';

class List extends Component{
  render(){
    return(
      <div>
      {
        this.props.array.map(function(item, index){
          return <li key={index}>{item}</li>
        })
      }
      </div>
    )
  }
}

export default List;

Answer 1

默认情况下，调用setState()会调用render()函数。更多信息请点击此处：ReactJS - Does render get called any time "setState" is called?

Answer 2

每当组件的props或state发生更改时，React都会呈现单个组件。为了对状态进行更改，对于类组件，使用this.setState()方法是的强制，该方法确保在必要时调用render()。

您的handleSubmit()方法直接更改数组，这是被禁止的(只允许在构造函数中设置初始状态)

如果你使用setState()，它应该可以工作。