Javascript 用React钩子做列表

我还没反应过来。我试图用react钩子制作简单的待办事项列表，并努力制作“删除所有按钮”。我认为使用setState[]或return[]可能是可行的 但它不起作用。。。 而且它显示了一个错误

TypeError:tasks.map不是函数

有人知道这是怎么回事吗

这是我的密码

import React, {useState} from 'react'


let INITIAL_TASK = {
    title: 'React',
    doing: false,
}

const App = () => {
    const [tasks, setTasks] = useState([INITIAL_TASK])
    const [task_title, setTask_title] = useState('')

    const handleTextFieldChanges = e => {
        setTask_title(e.target.value)
    }

    const resetTextField = () => {
        setTask_title('')
    }

    const isTaskInclude = () => {
        return tasks.some(task => task.title === task_title)
    }

    const addTask = () => {
        setTasks([...tasks, {
            title: task_title,
            doing: false,
        }])
        resetTextField()
    }

    const deleteTask = (task) => {
        setTasks(tasks.filter(x => x !== task))
    }

    const deleteAllTask = () => {
       -------------
    }

    const handleCheckboxChanges = task => {
        setTasks(tasks.filter(x => {
            if (x === task) x.doing = !x.doing
            return x
        }))
    }

    return (
        <React.Fragment>
            <Container component='main' maxWidth='xs'>
                <CssBaseline/>
                <Box
                    mt={5}
                    display='flex'
                    justifyContent='space-around'
                >
                    <TextField
                        label='title'
                        value={task_title}
                        onChange={handleTextFieldChanges}
                    />
                    <Button
                        disabled={task_title === '' || isTaskInclude()}
                        variant='contained'
                        color='primary'
                        onClick={addTask}
                        href=''
                    >
                        add
                    </Button>
                    <Button
                        // disabled={task_title === '' || isTaskInclude()}
                        variant='contained'
                        color='secondary'
                        onClick={deleteAllTask}
                        href=''
                    >
                        all delete
                    </Button>
                </Box>
                <List
                    style={{marginTop: '48px'}}
                    component='ul'>
                    {tasks.map(task => (
                        <ListItem key={task.title} component='li'>
                            <Checkbox
                                checked={task.doing}
                                value='primary'
                                onChange={() => handleCheckboxChanges(task)}
                            />
                            <ListItemText>{task.title}</ListItemText>
                            <Button
                                href=''
                                onClick={() => deleteTask(task)}
                            >
                                delete
                            </Button>
                        </ListItem>
                    ))}
                </List>
            </Container>
        </React.Fragment>
    )
}

export default App

import React，{useState}来自“React”
让初始任务={
标题：“反应”，
做：错，
}
常量应用=（）=>{
const[tasks，setTasks]=useState（[INITIAL_TASK]）
const[task_title，setTask_title]=useState（“”）
const handleTextFieldChanges=e=>{
设置任务标题（如目标值）
}
常量重置文本字段=（）=>{
设置任务标题（“”）
}
const isTaskInclude=（）=>{
返回tasks.some（task=>task.title===task\u title）
}
const addTask=（）=>{
setTasks（[…任务{
标题：任务名称，
做：错，
}])
resetTextField（）
}
常量deleteTask=（任务）=>{
setTasks（tasks.filter（x=>x！==task））
}
常量deleteAllTask=（）=>{
-------------
}
const handleCheckboxChanges=任务=>{
setTasks（tasks.filter（x=>{
如果（x==任务）x.doing=！x.doing
返回x
}))
}
返回(
添加
全部删除
{tasks.map（task=>(
handleCheckboxChanges（任务）}
/>
{task.title}
删除任务（任务）}
>
删除
))}
)
}
导出默认应用程序

您可以尝试执行以下操作

constdeleteAllTask=（）=>{
setTasks（[]）；
};

或者，如果希望将其设置为初始值，可以执行以下操作

constdeleteAllTask=（）=>{
设置任务（[初始任务]）；
};

也在

deleteAllTask

code中提供它与setTasks（[]）一起工作！！！非常感谢你