Я делаю приложение To-Do. Я использую интерфейс React, серверную часть Node и базу данных Postgresql.
Я создал компонент под названием <TaskLists />
, который принимает три свойства или реквизита:
startDate
endDate
allTasks
allTasks
— массив списков задач. Его основная структура выглядит следующим образом:
allTasks = [
{
id: //taskList id
list_date: //taskList date
tasks: [
{
id: // task id
title: // task title
done: // boolean value either true or false
}, ...
]
}, ...
]
Я успешно получаю этот массив allTasks
из своего бэкэнда, как я вижу из моего инструмента разработки реагирования.
Используя startDate
и endDate
, я визуализирую все списки задач с их list_date
ч/б, используя компонент <TaskLists />
.
Я пытаюсь визуализировать сегодняшние задачи (т. е. 19 июля 2024 г.) с помощью следующего кода:
<TaskLists startDate = {props.currentDate} endDate = {props.currentDate} currentDate = {props.currentDate} allTasks = {props.allTasks} />
Я сделал свойства startDate
и endDate
такими же, как currentDate
(т. е. 19-07-2024), которое я получаю от родительского компонента.
Теперь внутри моего компонента <TaskLists />
я хочу визуализировать либо список задач, имеющих list_date
ч/б startDate
и endDate
, либо я хочу визуализировать компонент <TaskListAbsent />
, который отображается, если нет списка задач ч/б startDate
и endDate
.
Итак, я сделал крючок useState()
:
const [requiredTaskLists, setRequiredTaskLists] = useState([]);
Ниже приведен код для установки переменной requiredTaskLists
:
const changeRequiredTaskLists = () => {
let newTaskList = [];
for(let i=0; i<props.allTasks.length; i++) {
if (props.startDate <= props.allTasks[i].list_date && props.endDate >= props.allTask[i].list_date) {
newTaskList.push(allTasks[i]);
}
}
setRequiredTaskLists(newTaskList);
}
А затем я вызвал функцию changeRequiredTaskLists()
в хуке useEffect()
, чтобы вызывать эту функцию при каждом рендеринге:
useEffect(() => {
changeRequiredTaskLists();
}, []);
И, наконец, я визуализирую компонент <TaskLists />
следующим образом:
return (
<>
{
requiredTaskLists.length !== 0 ?
<>
{
requiredTaskLists.map((taskList) => {
// code for displaying every `taskList` from `requiredTaskLists` array.
})
}
</> :
<>
<TaskListAbsent />
</>
}
</>
)
Но проблема в том, что цикл for
внутри checkRequiredTaskLists
не выполняется. И я могу подтвердить это с помощью журналов консоли.
Журналы консоли непосредственно до и после цикла for
выполняются, но журналы консоли внутри цикла for
не выполняются.
Поэтому массив newTaskList
остаётся пустым []
и requiredTaskLists
тоже устанавливается в пустой массив []
. Следовательно, requiredTaskLists.length
всегда равно 0
.
И, следовательно, мой код для отображения списка вообще не отображается. Рендерингом всегда занимается компонент <TaskListAbsent />
.
Пожалуйста, помогите мне с этим. Скажите мне, где я ошибаюсь. И есть ли другой способ достичь того, чего я пытаюсь достичь?
Похоже, здесь опечатка props.allTask[i].list_date
, должно быть allTasks
. Кроме того, вы должны вызывать useEffect каждый раз, когда изменяются зависимости:
useEffect(() => {
changeRequiredTaskLists();
}, [props.startDate, props.endDate, props.allTasks]);
Цикл for здесь слишком сложен, возможно, лучше использовать фильтр:
const changeRequiredTaskLists = () => {
const newTaskList = props.allTasks.filter(taskList => {
return props.startDate <= taskList.list_date && props.endDate >= taskList.list_date;
});
setRequiredTaskLists(newTaskList);
}
Надеюсь, это поможет
Итак,
props.allTasks
вы переходите вTaskLists
, откуда это берется, изначально оно пустое, а затем где-то useEffect заполняет его данными из вашей базы данных? Если да, то это будет означать, что ваши вызовыuseEffect
будут использовать этот начальный пустой массивchangeRequiredTaskLists
. Ваша основная проблема заключается в том, что вашallTasks
здесь не передает свои зависимости (что технически является функциейuseEffect
), вы должны передавать что-то вродеchangeRequiredTaskLists
в качестве массива зависимостей[props.allTasks, props.startDate, props.endDate]
.