О проблеме, которую я решил с помощью React Hooks

Я впервые использовал React Hooks 3 дня назад. У меня было любопытство по поводу React Hooks, и у меня была причина, по которой я не хотел использовать Class. Итак, я попробовал. Я обобщил полученные знания.

О проблеме

const IndexTaskPage = ({ dispatch, tasks }: Props) => {
  return (
    <div>
      {tasks.map((task) => {
        if (task.isFinished) return null;
        return (
          <TaskItem
             key={task.id}
             {...task}
             expired={selectExpiredTasks(task)}
             onClick={() => {dispatch(finishTask(task.id, { isFinished: true }, checkedBy))}}
          />
        );
      })}
    </div>
  );
};

Я составлял список дел. Кроме того, приведенный выше код является верхней страницей. На этой странице отображается список задач. У каждой задачи есть кнопка «Готово». Когда пользователь нажимает кнопку, задача исчезает с верхней страницы и появляется на «готовой странице задач». Я думал о добавлении новой функции в этот поток. Это отображается модально. Эта новая функция возникла из-за мнения, что многие пользователи хотят знать, кто проверяет, правильно ли завершена задача или нет. Модальное окно имеет текстовую форму, и пользователи должны ввести имя, которое проверило задачу. Таким образом, пользователи могут узнать, кто проверил задачу на «готовой странице задач». Каждая «готовая задача» имеет ключ «checkedBy».

Во-первых, я написал код ниже.

const IndexTaskPage = ({ dispatch, tasks }: Props) => {
  return (
    <div>
      {tasks.map((task) => {
        if (task.isFinished) return null;
        return (
          <TaskItem
            key={task.id}
            {...task}
            expired={selectExpiredTasks(task)}
           /* I didn't know what code to write in this place*/
            /* onClick={() => {displayModal(true)}} */

          />
        );     
      })}
      <FinishModal
        isOpen={true}
        finishTask={checkedBy => dispatch(finishTask(task.id, { isFinished: true }, checkedBy))}   
      />
    </div>
  );
};

Однако в этом случае Finished Modal не может понять task.id. Я выбрал React Hooks, потому что Class сделает код более объемным и займет много времени, чтобы изменить текущий код на код с отслеживанием состояния.

Как использовать React-хуки

ШАГ 1

импортировать «useState»

import React, { useState } from 'react';

ШАГ 2

определить начальное состояние, состояние и функцию для изменения состояния.

const [modalIsOpen, displayModal] = useState(false);
const [taskId, selectId] = useState(0);

В этом случае modalIsOpen и taskId — это состояния, displayModal и selectId — функции, а начальные состояния — false и 0. Мы можем изменить состояния, используя displayModal и selectId.

Окончательный код

const IndexTaskPage = ({ dispatch, tasks }: Props) => {
  const [modalIsOpen, displayModal] = useState(false);
  const [taskId, selectId] = useState(0);
  return (
    <div>
      {tasks.map((task) => {
        if (task.isFinished) return null;
        return (
          <TaskItem
            key={task.id}
            {...task}
            expired={selectExpiredTasks(task)}
            onClick={() => {
              displayModal(true);
              selectId(task.id);
            }}
          />
        );
      })}
      <FinishModal
        isOpen={modalIsOpen}
        finishTask={checkedBy => dispatch(finishTask(taskId, { isFinished: true }, checkedBy))}
      />
    </div>
  );
};

FinishModal может понять task.id в этом коде.

О проблеме, которую я решил с помощью React Hooks