如何重新验证与SWR关闭反应模式的数据？

Question

我正在尝试重新验证 reaction-modal 在NextJS项目中使用SWR关闭。

我正在使用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>
  ));

我有一个React模式，一旦我用句柄单击禁用了用户，就可以使用户禁用用户。

当模态关闭时，数据没有被淘汰。 这是来自文档的样本模式。

当我关闭模式时，可以看到用户列表。它们没有刷新，也没有使用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();
  }
....
}

Answer 1

您可以使用 突变 代码>在模态中触发模式中的回调。

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>
        </>
    )
}

调用突变（process.env.next_public_app_url +'/api/用户'）将使用给定的键向SWR挂钩向SWR挂载。意思是usesingwr（process.env.next_public_app_url +'/api/users'，fetcher，{...}）挂钩将重新运行并返回更新的用户数据。