减速机外壳设定值延迟响应

Question

当我在按钮单击时调度“REMOVE_TODO”时，它会执行我想要它执行的操作，我遇到的问题是它执行时。它不会返回正确的当前数组长度。

现在，当我单击一个项目时，它会发送“TOGGLE_TODO”，这将改变字体颜色并在文本中添加一条线。

现在，当我点击“清除完成”按钮时，它会切换“REMOVE_TODO”并且工作正常。它删除切换的项目。我遇到的问题是，当我单击一次按钮时，该数字不会反映列表中剩余的当前项目数量..

但是，如果我再次（或多次）单击该按钮，则数字会更新为正确的总数

这是我的应用代码

import React, { useState, useReducer } from 'react';
import { Reducer } from './reducers/reducer';
import './App.css';

function App() {
  const [{ todos, todoCount }, dispatch] = useReducer(Reducer, { 
    todos: [], 
    todoCount: 0,
    completedCount: 0
  });
  const [text, setText] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <div>ToDo List [ <span style={{color: '#61dafb', margin: '0px', padding: '0px'}}>{ todoCount }</span> ]</div>
        <div>
          { todos.map((todo, index) => (
              <div 
              key={index} 
              onClick={() => dispatch(
                { type: "TOGGLE_TODO", index }
              )}
              style={{
                fontFamily: 'Tahoma',
                fontSize: '1.5rem',
                textDecoration: todo.completed ? 'line-through' : "",
                color: todo.completed ? '#61dafb' : 'dimgray',
                cursor: 'pointer'
              }}
              >
                { todo.text }
              </div>
            )) 
          }
          <form
            onSubmit={e => {
              e.preventDefault();
              text.length === 0 ? alert("No Task To Add!") : dispatch({ type: "ADD_TODO", text });
              setText("");
            }}
          >
            <input 
              type="text"
              name="input"
              value={ text }
              onChange={e => setText(e.target.value)}
            /><br />
            <button>
              Add
            </button>
          </form>
          <button onClick={() => {dispatch({ type: "REMOVE_TODO" })}}>
            Clear Completed
          </button>
        </div>
      </header>
    </div>
  );
}

export default App;

这是我的减速器代码

export const Reducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return { 
                todos: [...state.todos, { text: action.text, completed: false, id: Date.now() }],
                todoCount: state.todoCount + 1,
                completedCount: 0
            };
        case 'TOGGLE_TODO':
            return { 
                todos: state.todos.map((todo, index) => index === action.index ? { ...todo, completed: !todo.completed } : todo),
                todoCount: state.todoCount,
                completedCount: 0
            };
        case 'REMOVE_TODO':
            return {
                todos: state.todos.filter(t => !t.completed),
                todoCount: state.todos.length
                }
        default:
            return state;
    };
 };

有谁知道我做错了什么，或者我没有做什么？提前致谢！

Answer 1

从reducer中移除“todoCount”，然后使用“todos”导出计数：

    <div>
      ToDo List [{" "}
      <span style={{ color: "#61dafb", margin: "0px", padding: "0px" }}>
        {todos.filter((todo) => !todo.completed).length}
      </span>{" "}
      ]
    </div>

在 CodeSandbox 中查看here