我想显示所有标记为已完成的待办事项的数量

Question

我的 5 个待办事项来自 JsonPlaceholder。当我点击任何待办事项时，我添加了一个直通 css 代码。我想要做的是，当用户点击待办事项时，必须将待办事项的属性设置为已完成：true 以便我可以在 TodoInfo.js 中显示已完成的待办事项数量

const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [show, setShow] = useState(true);
    const [fetchedData, setFetchedData] = useState(0);
    const [validate, setValidate] = useState(true);
    const addTodo = (todo) => {
        const newTodos = [...todos];
        const newTodo = { id: Math.random(), title: todo, completed: false };
        if (newTodo.title !== "") {
            newTodos.push(newTodo);
            setTodos(newTodos);
            setValidate(true);
        } else {
            setValidate(false);
        }    };

    //    const completeTask = (todo) =>{
    //     //    let newTodo = [...todos];
    //     //    newTodo[todo]={completed:true}
    //     //    setTodos(newTodo);
    //    }

    const removeTodo = (todo) => {
        let newTodos = todos.filter((item) => item.id !== todo.id);
        setTodos(newTodos);
    };

    const getData = () => {
        fetch("https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5")
            .then((response) => response.json())
            .then((json) => {
                const newTodos = json.map((todo) => {
                    todo.completed = false;
                    return todo;
                });
                setTodos(newTodos);
                setFetchedData(1);
            });
    };
    useEffect(() => {
        getData();
    }, []);
    return (
        <div className="wrapper">
            {!validate && (
                <UncontrolledAlert color="danger">
                    Lütfen Todo Giriniz
                </UncontrolledAlert>
            )}

            <div>
                <h5 className="heading">TODO UYGULAMASI</h5>
            </div>
            <hr />
            <Button
                color="info"
                className="btn-changeShow"
                onClick={() => setShow(!show)}
            >
                Change Show
            </Button>
            {show ? <AddTodo todos={todos} addTodo={addTodo} /> : null}
            <hr />
            {fetchedData ? (
                <TodoList
                    todos={todos}
                    removeTodo={removeTodo}
                    completeTask={completeTask}
                />
            ) : (
                "veriyi çekin"
            )}

            {/* <button onClick={getData} disabled={fetchedData}>Fetch Data</button> */}

            <TodoInfo todos={todos} />
        </div>
    );
};
export default TodoApp;  

---

这是我处理线条效果的 TodoList.js 文件

const TodoList = (props) => {

    // const [todo, setTodo] = useState(false);


    const lineTodo = (event) => {
        event.target.classList.toggle("strikeThrough")
        // props.completeTask(todo); 
    }


    return (
        <div>
            <Label>
                <span>YAPILACAK İŞLER</span>
            </Label>
            <hr />
            <ul>
                {props.todos.map((todo) => {
                    return (
                        <li className="listItem" key={todo.id}>
                            <p value={todo}  onClick={lineTodo}>
                                {todo.title}
                            </p>
                            <Button color="danger" className="ms-auto" onClick={() => props.removeTodo(todo)}>
                                SİL
                            </Button>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default TodoList;

---

这是我的 TodoInfo.js 文件，我想在其中显示设置为已完成的待办事项的数量：false

就像你有 6 个工作要做，你已经完成了 1 个待办事项

const TodoInfo = (props) => {
    return (
        <div>
            <Label>Toplam iş sayısı: {props.todos.length}</Label>
            {/* <label > Yapılan iş sayısı: {} </label> */}
            <Label> Yapılan iş sayısı:  {props.todos.completed} </Label>
        </div>
    );
};

export default TodoInfo;