问如何用SWR重新验证反应模态关闭的数据？
EN

Stack Overflow用户

提问于 2022-06-28 12:51:18

回答 1查看 238关注 0票数 1

我试图在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();
  }
....
}

react-modal

swr

reactjs

next.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-01 14: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, { ... })钩子将重新运行并返回更新的用户数据。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72793019

复制

【OpenGL】八、初始化 OpenGL 渲染环境 ( 导入 OpenGL 头文件 | 链接 OpenGL 库 | 将窗口设置为 OpenGL 窗口 | 设置像素格式描述符 | 渲染绘制 ) ★

opengl 渲染博客对象函数

上一篇博客【OpenGL】七、桌面窗口搭建 ( 导入头文件 | 桌面程序入口函数 | 注册窗口 | 创建窗口 | 显示窗口 ) 完成了桌面初始化的操作 , 注册桌面窗口 , 创建桌面窗口 , 显示桌面窗口 ;

韩曙亮

2023/03/28

1.7K0