待办事项列表显示待办事项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>
     );
   }
 }

和我的列表组件

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

React会在其props或state更改时渲染单个组件。为了更改状态，对于类组件，使用this.setState()方法是mandatory，该方法尤其需要确保在需要时调用render()。

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

如果使用setState()，它将起作用。