解决承诺后如何重新渲染反应功能组件答案

【问题标题】：How to re-render react functional component when a promise is resolved解决承诺后如何重新渲染反应功能组件
【发布时间】：2021-08-28 17:36:38
【问题描述】：

我正在尝试使用打字稿找出一个简单的待办事项应用程序。新创建的待办事项不会反映在列表中。我想弄清楚这里出了什么问题

我的反应组件

const service = new TodoService();

function App() {

  useEffect(()=>{
    service.getAllTodos();
  }); 

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <TodoContainer items={service.allTodos} onNewTodoCreated={description => {service.createTodo(description)}} />
      </header>
    </div>
  );
}

export default App;

TodoContainer 将项目列表和 newtodoCreated 作为道具

和我的服务

export default class TodoService {
    public allTodos: TodoItem[] = [
        {dateCreated: new Date(), id: v4(), description: "Fetch Milk" },
        {dateCreated: new Date(), id: v4(), description: "Buy iPhone" },
        {dateCreated: new Date(), id: v4(), description: "Impress at DWIT" },
    ]
    
    getAllTodos(): Promise<TodoItem[]> {
        return new Promise<TodoItem[]>((resolve) => {
             setTimeout(() => resolve(this.allTodos), 3000);
        });
    }

    createTodo(description: string): Promise<TodoItem> {

        return new Promise<TodoItem>((resolve) => {
            const id = uuidv4();
            const dateCreated = new Date();
            setTimeout(() => {
                const saved = {description, id, dateCreated};
                this.allTodos.push(saved);
                resolve(saved);
            }, 2000);
        })
    }
}

【问题讨论】：

标签： reactjs typescript functional-programming react-hooks

【解决方案1】：

你需要在这里使用useState钩子，像这样

function App() {
  const [todos, setTodos] = useState([]);
  
  useEffect(()=>{
    service.getAllTodos()
      .then(todos => setTodos(todos));
  }, []);

  const handleCreate = (description) => 
     service.createTodo(description)
       .then(todo => { /* @TODO update state */ })
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <TodoContainer
           items={todos}
           onNewTodoCreated={handleCreate} />
      </header>
    </div>
  );
}

export default App;

【讨论】：