Приложение Rendering React не применяется при добавлении элементов в массив внутри состояния

Question

Я стараюсь сделать приложение для тренировок.По какой-то причине, когда я нажимаю кнопку добавления, ничего не происходит, но тогда, если я применяю «onChange» к полю ввода, созданный todo действительно отображается в списке задач.Я пытался найти решение для этого в течение последних нескольких часов, я полагаю, что что-то упустил ... надеюсь, кто-то может понять это!

App.js

class App extends Component {
  state = {
    newTask: { id: 0, task: "" },
    tasks: [
      { id: 1, task: "task1" },
      { id: 2, task: "task2" },
      { id: 3, task: "task3" }
    ]
  };

  newTask = e => {
    this.setState({
      newTask: { id: this.state.tasks.length + 1, task: e.target.value }
    });
  };

  addTask = e => {
    this.setState(prevState => {
      prevState.tasks.push(this.state.newTask);
    });
  };

  render() {
    return (
      <div className="App">
        <Header title="Todo List" />
        <Form input={this.newTask} add={this.addTask} />
        <ul>
          {this.state.tasks.map(t => (
            <Tasks task={t.task} key={t.id} />
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

const form = props => {
  return (
    <div>
      <input
        type="text"
        placeholder="Type your task here..."
        onChange={props.input}
      />
      <button onClick={props.add}>Add</button>
    </div>
  );
};

const tasks = props => {
  return <div>{props.task}</div>;
};

Answer 1

Вы не return ничего внутри setState функционируют в addTask.Поэтому вы фактически обновляете состояние, но не запускаете жизненный цикл реагирующего обновления.

Я полагаю, вы должны попробовать что-то вроде этого:

addTask = e => {
    this.setState(prevState => {
        return { tasks: [...prevState.tasks, this.state.newTask]};
    });
  };