基于行onclick - ReactJS动态渲染模态

Question

正在为一个未公开的项目工作，在这个项目中，患者的数据从他们的API中提取出来，并作为modal加载到页面上。当你点击一个模态时，更多的威胁信息会被拉出来作为一个模态。这里的目标是让它们在有人点击它时基于div进行渲染。

我如何正确地发送数据从api到模态组件在每次点击?

点击

import React, {useState,useEffect} from 'react';
const keys = Object.keys(arr[0]);
// const handleOnClick = param => {
//   console.log('do something: ', param);
// }
export default function Demo() {
const [isModalOpen, setModalIsOpen] = useState(false);
const [users, setUsers] = useState([]);
const toggleModal = () => {
setModalIsOpen(!isModalOpen);
};

const handleOnClick = () => {
toggleModal()
};
useEffect(() => {
const fetchUsers = async () => {
try {
const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
setUsers(data);
} catch (err) {
console.error("failed", err);
}
setModalIsOpen(false);
};
fetchUsers();
}, []);
return (
<div className="container">
<>
{keys.map((key) => (
<div className="col" key={key}>
<div className="row">{key}</div>
{arr[0][key].map((item) => (
<div className="row" key={item.technique_id} onClick={() => handleOnClick(item)}>{item.technique}</div>
))}
</div>
))}
</>
{isModalOpen && <Modal onRequestClose={handleOnClick} data={users}/>}
</div>
);
}

模态

import React, { useEffect } from "react";
const Modal = ({ onRequestClose, data }) => {
// Use useEffect to add an event listener to the document
useEffect(() => {
function onKeyDown(event) {
if (event.keyCode === 27) {
// Close the modal when the Escape key is pressed
onRequestClose();
}
}
// Prevent scolling
document.body.style.overflow = "hidden";
document.addEventListener("keydown", onKeyDown);
// Clear things up when unmounting this component
return () => {
document.body.style.overflow = "visible";
document.removeEventListener("keydown", onKeyDown);
};
});
return (
<div className="modal__backdrop">
<div className="modal__container">
<div className="modal-header">
<div className="modal-close" onClick={onRequestClose}>
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
<div className="job-title-wrapper">
<div className="job-card-title">{data}</div>
</div>
</div>
</div>
);
};
export default Modal;

Answer 1

如果我理解正确，你想做一个特定的API调用，并设置它的数据到模态当用户点击一行，正确吗?

你目前通过你的useEffect所做的只是每次在你的组件更新时总是抓取用户数据，这可能不是你想要的基于你的描述。所以你可以完全删除那个block

相反，您希望在单击行时调用该API，因此看起来更合适的地方是在handleOnClick函数上。它应该看起来像这样:

const handleOnClick = async () => {
try {
const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
setUsers(data);
// Now that the data has been fetched, open the modal
setModalIsOpen(true);
} catch (err) {
console.error("failed", err);
}
};

像这样，当模态打开时，数据应该全部设置在user状态。通过这些更改，您的Demo组件应该看起来像这样:

export default function Demo () {
const [isModalOpen, setModalIsOpen] = useState(false);
const [users, setUsers] = useState([]);

const handleOnClick = async () => {
try {
const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
setUsers(data);
// Now that the data has been fetched, open the modal
setModalIsOpen(true);
} catch (err) {
console.error("failed", err);
}
};

return (
<div className="container">
<>
{keys.map((key) => (
<div className="col" key={key}>
<div className="row">{key}</div>
{arr[0][key].map((item) => (
<div className="row" key={item.technique_id} onClick={() => handleOnClick(item)}>{item.technique}</div>
))}
</div>
))}
</>
{isModalOpen && <Modal onRequestClose={() => setModalIsOpen(false)} data={users}/>}
</div>
);
}