Невозможно попасть внутрь цикла for в React js

Я делаю приложение To-Do. Я использую интерфейс React, серверную часть Node и базу данных Postgresql. Я создал компонент под названием <TaskLists />, который принимает три свойства или реквизита:

1. startDate
2. endDate
3. 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 />.

Пожалуйста, помогите мне с этим. Скажите мне, где я ошибаюсь. И есть ли другой способ достичь того, чего я пытаюсь достичь?

🤔 А знаете ли вы, что...
С помощью JavaScript можно создавать клиентские приложения для мобильных устройств с использованием фреймворков, таких как React Native и NativeScript.