React Hooks在模式弹出菜单上调用GET请求

Question

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

我已经完成了大部分工作(我想(，但本质上我所做的是创建一个自定义的Modal Hook，用于切换两个模态。

这两个模式中的第二个模式是打开一个任务，并以一种形式呈现任务细节以供编辑，但我无法使其工作。

这是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行：应为赋值或函数调用，却看到一个没有未使用表达式的表达式"；

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

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

Paul

Answer 1

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

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

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

let taskid = prop.match.params.id;