React函数组件在Promise resolve后如何重渲染？新增Todo未在列表显示问题

你的待办数据存放在React外部的TodoService类实例属性中，React只有在自身管理的state/props/context发生变化时才会触发组件重渲染，无法感知外部变量的变更，这是新增待办后不展示的根本原因。同时现有代码还存在两个可优化点：

• useEffect没有设置空依赖数组，会在组件每次渲染后重复执行
• 异步方法getAllTodos、createTodo的返回结果没有同步到React状态中

在App组件中通过React State托管待办列表，异步操作完成后更新State触发重渲染即可，修改后的代码如下：

import { useState, useEffect } from 'react';
const service = new TodoService();

function App() {
  // 声明state存储待办列表，作为组件渲染的唯一数据源
  const [todos, setTodos] = useState<TodoItem[]>([]);

  useEffect(()=>{
    // 组件挂载时拉取初始待办列表
    const fetchInitialTodos = async () => {
      const initialTodos = await service.getAllTodos();
      setTodos(initialTodos);
    }
    fetchInitialTodos();
  }, []); // 空依赖保证只在组件挂载时执行一次

  // 封装新增待办的逻辑，异步完成后更新state
  const handleCreateTodo = async (description: string) => {
    const newTodo = await service.createTodo(description);
    // 返回新数组触发React检测到引用变更，不要直接在原数组push
    setTodos(prevTodos => [...prevTodos, newTodo]);
  }

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

export default App;

如果TodoService需要在多个组件复用，可以通过React Context封装service实例和待办State，避免逐层传递props。

内容的提问来源于stack exchange，提问作者zoozooo