Question

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

我的反应组件

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);
        })
    }
}

Answer 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;

当承诺被解决时如何重新渲染反应功能组件

1 个答案: