时间戳

首页 > 解决方案 > 尝试使用反应钩子设置状态，但我得到的是一个空数组

arrays - 尝试使用反应钩子设置状态，但我得到的是一个空数组

问题描述

正如你所看到的，我对 React.js 还很陌生。在这里，我正在尝试创建一个待办事项列表应用程序。它的顶部应该有三个按钮——一个用于显示已完成的任务，第二个用于未完成的任务，最后一个用于显示列表中的所有任务。所以，我需要两个列表——一个用于添加到列表中的每个项目，另一个用于过滤我猜。问题是在这种情况下我无法掌握状态，我的过滤器数组是空的。我不想直接改变状态，但尝试了很多事情，我不得不做错事。这是第一个按钮的代码。

我想点击按钮，重新渲染网站并获得过滤项目列表。

 //todos, setTodos are for my primary state

 const TodoFilter = ({ todos, setTodos}) => {

 const [filter, setFilter] = useState([])

 const handleActive = () => {
 const allTodos = [...todos]

 const completedFilter = allTodos.filter(item => item.isComplete === true)   

 setFilter(completedFilter)

 }

标签： arraysreactjsreact-hooksstateuse-state

解决方案

您的代码丢失了很多，所以不确定这是您迄今为止编码的所有内容，还是您没有包含其他一些位。在清除它们之前，您需要添加一个复选框来检查已完成的待办事项。

请尝试使用以下代码从未完成的待办事项中过滤已完成的待办事项，并假设您有一个清除它的按钮。希望这可以帮助

function handleCleartodos() {
const completedFilter = allTodos.filter(item => !item.isComplete)
setFilter(completedFilter)
}

<button onClick={handleCleartodos}>Clear Todos</button>

推荐阅读