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

Posted 2023-02-21

【中文标题】React Hooks 在模态弹出窗口上调用 GET 请求

【英文标题】：React Hooks Calling GET Request On Modal Popup

【发布时间】：2020-10-30 03:14:20

【问题描述】：

提前感谢您提供的任何帮助。我正在尝试创建一个 Modal 响应并调用 get 请求来加载任务的详细信息。

我的大部分工作都在工作（我认为），但基本上我所做的是创建一个自定义模态钩子来切换两个模态。

两个模式中的第二个是用来打开一个任务并在一个表单中呈现任务细节以供编辑，但我无法让它工作。

这里是 useModal 钩子：

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/)，但我不熟悉使用基于类的组件，当我尝试转换为基于函数的组件时，我什至会遇到更多问题。

在此先感谢您提供的任何见解，因为我一直在努力解决这个问题。

保罗

【参考方案1】：

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

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

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

let taskid = prop.match.params.id;

【讨论】：

太棒了，谢谢，这至少让组件再次呈现，尽管还没有作为模态。真的很感激。

@PaulTowers 谢谢