Javascript 尝试在每次输入新todo时更新todo列表

我在react with flux中创建了一个基本的todo应用程序。我正试图做到这样，每次在API中输入新的todo时，列表都会实时更新，而不必重新加载页面和应用程序发出另一个请求。我尝试过使用componentDidUpdate；然而，在这种情况下，这似乎不起作用。我应该如何着手实现这一点

我的Todos.js

import React from "react";

import * as TodoActions from "../actions/TodoActions";
import TodoStore from "../stores/TodoStore";
import './Todos.css'


export default class Todos extends React.Component {
  constructor() {
    super();
    this.addItem = this.addItem.bind(this);
    this.deleteTodo = this.deleteTodo.bind(this)
    this.getTodos = this.getTodos.bind(this);
    this.state = {
      todos: TodoStore.getAll(),
    };
    TodoActions.receiveTodos()
  }

  componentWillMount() {
    TodoStore.addChangeListener(this.getTodos);
  }

  componentWillUnmount() {
    TodoStore.removeChangeListener(this.getTodos);
  }

  componentDidMount() {
    TodoActions.receiveTodos();
  }

  componentDidUpdate() {
    TodoActions.receiveTodos();
  }

  getTodos() {
    this.setState({
      todos: TodoStore.getAll(),
    });
  }


  deleteTodo(id) {
    TodoActions.deleteTodo(id);
    }

  addItem(e) {
    e.preventDefault();
    TodoActions.createTodo(this._inputElement.value)
  }

  render() {
    const { todos } = this.state;

    const TodoComponents = todos.map((todo) => {
        return (
          <div key={todo.id} className="todo-list">
            <div className="todo-name">{todo.name}</div>
            <div className="todo-btn"><button type="button" onClick={() => this.deleteTodo(todo.id)}>Delete</button></div>
          </div>
        )
    });

    return (
      <div className="main-container">
        <h1 className="title">Todos</h1>
        <ul>{TodoComponents}</ul>
        <form onSubmit={this.addItem}>
          <input ref={(a) => this._inputElement = a} placeholder="Enter Task" className="input-form"/>
          <button type="submit" className="input-btn">Add</button>
        </form>
      </div>
    );
  }
} 

My TodoActions.js

import AppDispatcher from "../dispatcher";
import apiClient from "../api-client"

export function createTodo(name) {
  apiClient.createTodo({name: name}).then((result) => {
    AppDispatcher.dispatch({
      type: "CREATE_TODO",
      name: result,
    });
  })
}

export function deleteTodo(id) {
  apiClient.deleteTodo(id).then((result) => {
    AppDispatcher.dispatch({
      type: "DELETE_TODO",
      id,
    });
  })
}


export function receiveTodos() {
  apiClient.getAllTodos().then(result => {
    AppDispatcher.dispatch({
      type: "RECEIVE_TODOS",
      todos: result.payload
    });
  })
}

---

第一个选项似乎不起作用。我怎么能试试第二个呢？

import AppDispatcher from "../dispatcher";
import apiClient from "../api-client"

export function createTodo(name) {
  apiClient.createTodo({name: name}).then((result) => {
    AppDispatcher.dispatch({
      type: "CREATE_TODO",
      name: result,
    });
  })
}

export function deleteTodo(id) {
  apiClient.deleteTodo(id).then((result) => {
    AppDispatcher.dispatch({
      type: "DELETE_TODO",
      id,
    });
  })
}


export function receiveTodos() {
  apiClient.getAllTodos().then(result => {
    AppDispatcher.dispatch({
      type: "RECEIVE_TODOS",
      todos: result.payload
    });
  })
}