Невозможно попасть внутрь цикла 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 />.

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

Итак, props.allTasks вы переходите в TaskLists, откуда это берется, изначально оно пустое, а затем где-то useEffect заполняет его данными из вашей базы данных? Если да, то это будет означать, что ваши вызовы useEffect будут использовать этот начальный пустой массив changeRequiredTaskLists. Ваша основная проблема заключается в том, что ваш allTasks здесь не передает свои зависимости (что технически является функцией useEffect), вы должны передавать что-то вроде changeRequiredTaskLists в качестве массива зависимостей [props.allTasks, props.startDate, props.endDate].

Nick Parsons 19.07.2024 08:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, здесь опечатка 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);
  }

Надеюсь, это поможет

Другие вопросы по теме