如何避免在循环和条件中使用React Hooks ?

Question

我有以下问题:当我打开WebApp时，我正在使用Use Effect钩子来更新我的任务列表。所以我必须列出一个列表的任务具有属性经常性任务(recuringTaskManager.lastWeeklyReset)和一个列表，可以有属性经常性和不(taskList)。所以我的目标是在特殊情况发生时用另一个更新taskList(如果differenceInDays....)。所以我想删除Taskslist中的一些任务，因此过滤器功能，并再次添加它们，以便可以刷新一个特殊的属性。我发现在条件和循环中使用钩子总是很糟糕，但我不知道如何在没有循环和条件的情况下编写它。

也许你知道

useEffect(() => {
if (!isInitialized) return
if (differenceInDays(new Date("July 28, 2022 00:00:00"), state.recuringTaskManager.lastWeeklyReset) >= 7) {
for (let task of state.recuringTaskManager.recuringTaskListWeekly) {
const {id} = task
setState({...state, taskList: state.taskList.filter((task: Task) => task.id !== id)})
state.recuringTaskManager.recuringTaskListWeekly)
}
setState({...state, taskList: [...state.recuringTaskManager.recuringTaskListWeekly, ...state.taskList]})
}
}, [isInitialized])

Answer 1

要避免这种情况你可以设置一个变量并在循环中增加它然后在循环外设置状态或者我认为对于你的情况你可以在一行内完成

setState({...state, taskList: state.taskList.filter(({id}) => !state.recuringTaskManager.recuringTaskListWeekly.some(({id: id2}) => id === id2))})

如果数组中有一项满足条件，则some方法返回true;如果不满足条件，则返回false