我正在开发一个简单的待办事项应用程序，但遇到了瓶颈。基本上，我的数组过滤不起作用。它实际上什么也没做，我也不知道为什么。我在应用程序中使用了 Material UI，我怀疑其中存在一些相关问题，但无法完全弄清楚。

我试图通过单击触发“deleteTodo”函数的垃圾图标来删除一项待办事项。但它并没有将其从待办事项中删除。实际上，正如我所说，它什么也没做。我将待办事项保存在 localStorage 中。

这是我的删除一项待办事项函数：

    function deleteTodo(id) {
        setTodos(todos.filter((todo,i,arr) => {
            console.log("id:", id)
            console.log("todo.id:",todo.id)
            console.log("are equal:", todo.id === id)
            console.log(i, arr)
            return (todo.id !== id)
        }))
    }

控制台输出：

[Log] id: – "37dbcd88d5a"
[Log] todo.id: – "37dbcd88d5a"
[Log] are equal: – true
[Log] 1 – [{text: "two", done: false, id: "7dbcd88d5a3"}, {text: "one", done: false, id: "37dbcd88d5a"}] (2)

我的整个组件：

import { uid } from 'uid'
import { useState , useEffect, useLayoutEffect, useRef } from "react"
import { Card, CardContent, Modal, List, ListItem, Box, Button, IconButton, TextField, Typography } from "@mui/material"
import styles from "../styles/Todos.module.css"
import { TransitionGroup } from 'react-transition-group';
import ReportProblemIcon from '@mui/icons-material/ReportProblem';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';


export default function Todos () {
    const [ text, setText ] = useState("")
    const [ todos, setTodos ] = useState([])
    const [ showClearTodosModal, setShowClearTodosModal] = useState(false)
    const inputRef = useRef()

    useEffect(() => {
        // localStorage.todos && console.log('b1:',JSON.parse(localStorage.todos))
        if (localStorage.todos) {
            // localStorage.todos && console.log(JSON.parse(localStorage.todos))
            setTodos(JSON.parse(localStorage.todos))
        } else {
            localStorage.todos = []
        }
        // localStorage.todos && console.log('a1:',JSON.parse(localStorage.todos))
    }, [])
    useEffect(() => {
        if (todos && todos.length > 0) {
            localStorage.todos && console.log('b2:',JSON.parse(localStorage.todos))
            localStorage.setItem("todos", JSON.stringify(todos))
            localStorage.todos && console.log('a2:',JSON.parse(localStorage.todos))
        }
    }, [todos])

    function handleSubmit(e) {
        e.preventDefault()
        const id = uid()
        setTodos([{text, done:false, id:id}, ...todos])
        setText("")
    }

    function markDone(e) {
        setTodos(todos.map(todo => {
            if (e.target.innerText === todo.text) {
                return {...todo, done:!todo.done}
            } else {
                return todo
            }
        }))
    }

    function deleteTodo(id) {
        setTodos(todos.filter((todo,i,arr) => {
            console.log("id:", id)
            console.log("todo.id:",todo.id)
            console.log("are equal:", todo.id === id)
            console.log(i, arr)
            return (todo.id !== id)
        }))
    }
    function deleteAll() {
        setTodos([])
        setShowClearTodosModal(false)
        localStorage.removeItem("todos")
    }

    return (
        <Box>
            <form
                onSubmit={handleSubmit}
            >
                <TextField 
                    className={styles.entryfield}
                    label="Add a todo"
                    autoFocus
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    ref={inputRef}
                />
            </form>

            <Button 
                 color="primary" 
                 aria-label="upload picture" 
                 component="span"
                    className={styles.clearall} 
                    onClick={() => setShowClearTodosModal(true)}
                startIcon={<ReportProblemIcon />}
            >
                Delete All Todos
            </Button>
            <Modal
              open={showClearTodosModal}
              onClose={() => setShowClearTodosModal(false)}
              aria-labelledby="delete all todos"
              aria-describedby="delete all todos"
              className={styles.deleteallmodal}
            >
              <Box className={styles.modalbox}>
                <Typography id="modal-modal-title" variant="h6" component="h2">
                    Delete all todos?
                </Typography>
                <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                    Are you sure you want to delete all todos? This action is irreversable and you will lose all of your todos.
                </Typography>
                <Button
                    onClick={() => setShowClearTodosModal(false)}
                    variant="contained"
                    sx={{m:1}}
                >
                Nah, don't delete my todos
                </Button>
                <Button 
                    onClick={deleteAll}
                    variant="contained"
                    startIcon={<ReportProblemIcon />}
                    sx={{
                        m:1,
                        color: "maroon",
                    }}
                >
                Yes I&apos;m sure delete all of them
                </Button>
              </Box>
            </Modal>

            <List>
            {todos && todos.map(todo =>(
                <ListItem 
                    key={todo.id}
                    onClick={markDone}
                >
                    <Card className={styles.card}
                    >
                            <IconButton 
                                className={styles.icons}
                                onClick={() => {deleteTodo(todo.id)}}
                                aria-label="delete"
                            >
                              <DeleteIcon fontSize="small"/>
                            </IconButton>
                            <IconButton 
                                className={styles.icons}
                                aria-label="edit"
                            >
                              <EditIcon fontSize="small"/>
                            </IconButton>
                            <Typography
                                    variant="body1"
                                    style= {{
                                        color: todo.done ? "#555" : "",
                                        margin: 10,
                                    }}
                            >
                                {todo.text}
                            </Typography>
                    </Card>
                </ListItem>
                )
            )}
            </List>
        </Box>
    )
}