从 /pages/api 文件夹调用 api 路由时，React 的 useTransition() 卡在 isPending = true 中

Question

我对 useTransition() 有疑问，它被设置为 true 但实际上永远不会变回 false。 我正在尝试从 MongoDB 中删除记录，完成后我想刷新 React 服务器组件，如下所述： https://beta.nextjs.org/docs/data-fetching/mutating

问题是，在这种情况下，服务器组件不会得到刷新，并且 Button 卡在加载文本中。

'use client'

const DeleteButton = ({ details }) => {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  
  const handleDelete = async () => {
    await fetch('/api/clients', { method: 'DELETE', body: details._id });
     startTransition(() => {
       console.log('tran started', isPending);
       router.refresh();
     });
  }

  useEffect(() => {
    // at load isPending = false
    // after start tranisition it is set to false
    // but it never returns back to false 
    console.log('is pending ? ', isPending);
  }, [isPending]);

  return <Button onClick={() => handleDelete()}>{ isPending ? 'Loading' : 'Delete' }</Button>
}

这是 /api/clients 中的 BE 代码

import type { NextApiRequest, NextApiResponse } from 'next';
import ClientsCollection from '../../db/collections/clients';
import Client from '../../helpers/interfaces/client';

type Data = {
  name: string;
};
const clientsCollection = new ClientsCollection();

export default function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  switch (req.method) {
    case 'DELETE': {
      const result = clientsCollection.deleteClientById(req.body);
      res.status(200).json(result);
    }
    default:
      res.status(403);
  }
}

Answer 1

关闭这个。

如果您要使用react-redux或任何其他推荐父级别 Context 和useTransition()的工具，那么您必须仅将它应用于离开的客户端组件，否则转换将在isPending === true state 中被阻止。