如何打开一个响应异步内模态?

Question

嗨，我试图打开一个模态时，我的API响应错误，但它不呈现我的模态，或者你有其他的想法如何显示模态每次API给出一个错误?

const useEmbedContent = (resourceId) => {
const [resourceBase64File, setResourceBase64File] = React.useState(null);
const [resourceFile, setResourceFile] = React.useState(null);
const [error, setError] = React.useState('');
const [isOpen, setIsOpen] = React.useState(false);
const loadResourceFile = async () => {
try {
const file = await resourceDetailBlobApi.create({_id: resourceId});
setResourceFile(file);

const base64 = await fileToBase64(file);
setResourceBase64File(base64);
} catch (createError) {
// modal status
setIsOpen(true)
{isOpen && <Modal setIsOpen={setIsOpen} />}
setResourceFile(null);
setResourceBase64File(null);
setError(createError);
}
};
React.useEffect(() => {
loadResourceFile();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return {
resourceBase64File,
resourceArrayBuffer: resourceFile,
error
};
};

Answer 1

将{isOpen && <Modal setIsOpen={setIsOpen} />}移动到组件或页面您想要显示modal:

在yourpage.js或yourcomponent.js中:

export default funtion YourComponent({setIsOpen}){
return(
<>
{isOpen && <Modal setIsOpen={setIsOpen} />} //<== Move to inside your Component or your Page
</>  
)
}

Answer 2

似乎你正在尝试创建自定义钩子。无论如何，您已经返回了error状态。因此，根据错误状态，您可以渲染模型

const ModalComponent = () => {
const { error } = useEmbedContent()
return (
<>
{ error && <Modal setIsOpen={setIsOpen} />}
</>
)
}