React useTransition() застрял в isPending = true при вызове маршрутов API из папки /pages/api

Question

У меня возникла проблема с useTransition(), поскольку для него устанавливается значение true, но на самом деле он никогда не меняется обратно на false. Я пытаюсь удалить запись из MongoDB, и после ее завершения я хотел бы обновить компонент React Server, как описано здесь:https://beta.nextjs.org/docs/data-fetching/mutating .

Проблема в том, что в этом случае серверный компонент не будет обновляться, а кнопка зависает при загрузке текста.

      '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>
}

Это код BE в /api/clients

      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

Закрытие этого.

Я неправильно понял, почему произошла ошибка, у меня в основном было useEffect, чтобы реагировать на изменения из Redux, которые по какой-то причине заблокировали настройку isPending обратно на false.

Я отлаживал его так, как я закомментировал текущую таблицу, в которой отображались все записи, и создал простую таблицу html без какой-либо функциональности, которая помогла мне определить, какой код был неправильным.