Реагирующие хуки, вызывающие запрос GET в модальном всплывающем окне - PullRequest
Новая
       106

Реагирующие хуки, вызывающие запрос GET в модальном всплывающем окне

2 голосов
/ 09 июля 2020

Заранее благодарим за любую помощь, которую вы можете оказать. Я пытаюсь создать Modal, реагировать и вызывать запрос на получение для загрузки деталей задачи.

У меня большая часть работает (я думаю), но по сути то, что я сделал, - это создание пользовательского Modal Hook, который переключает два модальных окна.

Второй из двух модальных окон предназначен для открытия задачи и отображения деталей задачи в форме для редактирования, но я не могу заставить ее работать.

Вот useModal hook: 

import { useState } from "react";

const useModal = () => {
const [isShowing, setIsShowing] = useState(false);
const [secondModalIsShowing, secondModalSetIsShowing] = useState(false);

function toggle() {
  setIsShowing(!isShowing);
}

function secondToggle() {
  secondModalSetIsShowing(!secondModalIsShowing);
  console.log("clicked");
}

return {
   isShowing,
   toggle,
   secondModalIsShowing,
   secondToggle,
  };
};

export default useModal;

Затем я вызываю функцию для secondToggle, которая запускает приведенный ниже код для рендеринга модального окна. Теперь, как вы можете видеть, мне нужно закомментировать раздел, в котором вызывается getTask () с match.params.id, а также компонент, который затем должен отображаться в модальном окне.

Если я не Не делайте этого, я получаю сообщение об ошибке следующего содержания: «Строка 23: 5: Ожидается назначение или вызов функции, а вместо этого я увидел выражение no-unused-expressions» 

  import React, { Fragment, useEffect, useState } from "react";
  import { connect } from "react-redux";
  import PropTypes from "prop-types";
  import TaskItem from "../tasks/task-item/TaskItem";
  import { getTask } from "../../actions/task";
  import ReactDOM from "react-dom";
  import "./Modal.styles.scss";
  import "../dashboard/Dashboard.styles.scss";
  import Task from "../task/Task";
  import TaskEdit from "../task/TaskEdit";


  const TaskModal = ({
    getTask,
    task: { task, loading },
    match,
    secondModalIsShowing,
    hide,
  }) => {
const [displayEdit, toggleDisplayEdit] = useState(false);

 useEffect(() => {
   getTask();
   // match.params.id;
 }, [getTask]);

 return secondModalIsShowing
   ? ReactDOM.createPortal(
       <React.Fragment>
         <button
           type="submit"
           value="toggle"
           onClick={() => toggleDisplayEdit(!displayEdit)}
         >
            Show/Edit
         </button>
         {(displayEdit && <TaskItem task={task} />) || (
           <div>{/* <TaskEdit /> */}</div>
         )}
         <div className="modal-overlay" />
         <div
           className="modal-wrapper"
           aria-modal
           aria-hidden
           tabIndex={-1}
           role="dialog"
         >
              <div className="modal">
             <div className="modal-header">
               Add New Task
               <button
                 type="button"
                 className="modal-header__button"
                 data-dismiss="modal"
                 aria-label="Close"
                 onClick={hide}
               >
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
           </div>
         </div>
       </React.Fragment>,
       document.body
     )
   : null;
  };

Теперь, если я визуализирую эту EditTask компонент вне модального окна как обычный компонент работает правильно. Я также могу получить модальное окно для рендеринга, когда оно не пытается отобразить компонент EditTask.

В результате я думаю, что это связано с путем Route и передачей ответа компоненту TaskModal? Когда я щелкаю модальное окно, чтобы открыть, я не могу заставить его отобразить URL-адрес с идентификатором задачи, и поэтому я не могу отобразить детали задачи в модальном окне. 

  <Route path="/taskedit/:id" component={TaskModal} />

Для контекста, я думаю, это руководство идет близок к решению моей проблемы (https://blog.logrocket.com/building-a-modal-module-for-react-with-react-router/), но я не знаком с работой с компонентами на основе классов, и когда я пытаюсь преобразовать их в функциональные компоненты, у меня возникает еще больше проблем.

Заранее благодарю за любую информацию, которую вы можете предоставить, поскольку я продолжаю работать над этим.

Пол

1 Ответ

1 голос
/ 09 июля 2020

Первая проблема, которую я вижу, заключается в том, что вам нужно передать идентификатор задачи компоненту TaskModal. 

    <Route path="/taskedit/:id"
           render={(props) => <TaskModal {...props} />}>
   </Route>

Это сделает идентификатор задачи доступным как свойство в TaskModal. Затем в TaskModal выберите, как показано ниже 

let taskid = prop.match.params.id;
...