如何用SWR重新验证反应模态关闭的数据？
如何用SWR重新验证反应模态关闭的数据？
提问于 2022-06-28 20:51:18
我试图在revalidate项目中使用SWR在反应模态 close上使用NextJS数据。
我像这样使用SWR钩子。
const { data, error, isValidating } = useSWR(
process.env.NEXT_PUBLIC_APP_URL + `/api/users`,
fetcher,{
revalidateIfStale: true,
revalidateOnFocus: true,
revalidateOnMount:true,
}
);
useEffect(() => {
if (data) {
setUsers(data.users);
}
}, [data, isValidating, users]);
//handle loading..
//handle error..
return (
<main className="mx-auto max-w-7xl ">
<Header title="All users"/>
<UsersList users={users} />
</main>
);我正在获取一个用户列表并显示它们。
const usersList = users.((user) => (
<div className="space-x-5 text-sm" key={user.id}>
{user.name}
<DisableModal id={user.id} isDisabled={user.active}/>
</div>
));我有一个反应模式，允许我们禁用用户，一旦我已经禁用用户的句柄点击。
当模式关闭时，数据不会被重取。这是文档中的样本模式。
当我关闭模式时，可以看到用户列表。它们不会刷新，也不会使用使用SWR的重新验证。
export const DisableModal = ({
id,
isDisabled,
}) => {
const [disableModalIsOpen, setDisableModalIsOpen] = useState(false);
function closeDisableModal() {
setDisableModalIsOpen(false);
}
function openPublishModal() {
setDisableModalIsOpen(true);
}
const handleDisableUser = async () => {
//disable logic in rest call.
closeDisableModal();
}
....
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-01 22:12:09
当触发模式中的mutate回调时，您可以使用onAfterClose手动重新验证数据。
export const DisableModal = () => {
const [showModal, setShowModal] = useState(false);
const { mutate } = useSWRConfig()
return (
<>
<button onClick={() => { setShowModal(true) }}>Trigger Modal</button>
<ReactModal
isOpen={showModal}
onAfterClose={() => {
mutate(process.env.NEXT_PUBLIC_APP_URL + '/api/users')
}}
contentLabel="Minimal Modal Example"
>
<button onClick={() => { setShowModal(false) }}>Close Modal</button>
</ReactModal>
</>
)
}调用mutate(process.env.NEXT_PUBLIC_APP_URL + '/api/users')将用给定的键向SWR钩子广播一条重新验证消息。这意味着useSWR(process.env.NEXT_PUBLIC_APP_URL + '/api/users', fetcher, { ... })钩子将重新运行并返回更新的用户数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72793019
复制相关文章
相似问题
腾讯云开发者
