reactjs - React Hooks 在模态弹出窗口上调用 GET 请求

Question

提前感谢您提供的任何帮助。我正在尝试创建一个 Modal 响应并调用 get 请求来加载任务的详细信息。
我的大部分工作(我认为)，但基本上我所做的是创建一个自定义模态钩子(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 的函数，该函数触发下面的代码以呈现模态。现在您可能会看到，我必须用 match.params.id 注释掉调用 getTask() 的部分，以及随后要在模式中呈现的组件。
如果我不这样做，我会收到一条错误消息，其中包含以下“第 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组件？当我单击模式打开时，我无法使用任务 ID 呈现 URL，因此我无法在模式中呈现任务的详细信息。

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

就上下文而言，我认为本指南接近解决我的问题 ( https://blog.logrocket.com/building-a-modal-module-for-react-with-react-router/)，但我不熟悉使用基于类的组件，当我尝试转换为基于功能的组件时，我遇到了更多问题。
提前感谢您在我不断尝试解决此问题时提供的任何见解。
保罗

Answer 1

我看到的第一个问题是您必须将任务 ID 传递给 TaskModal 组件

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

这将使任务 ID 可用作 TaskModal 中的属性。
然后在TaskModal中，获取如下

let taskid = prop.match.params.id;