0

useTransition当从完成返回时，我希望能够改变我自己的状态。也就是说，目前，在下面的示例中，isPending从 true 切换到 false，但这还不够。我希望能够在该更改上执行代码。

也就是说，在下面的示例中，我希望可以做一些类似的事情useEffect，并在挂起的事件发生更改时从执行返回的代码startTransition，但这不起作用。

还有其他选择吗？

onClick={() => {
          startTransition(() => {
            const nextUserId = getNextId(resource.userId);
            setResource(fetchProfileData(nextUserId));
            return () => { DO THIS CODE WHEN PENDING BECOMES FALSE }
          });
        }}

function App() {
  const [resource, setResource] = useState(initialResource);
  const [startTransition, isPending] = useTransition({
    timeoutMs: 3000
  });
  return (
    <>
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            const nextUserId = getNextId(resource.userId);
            setResource(fetchProfileData(nextUserId));
          });
        }}
      >
        Next
      </button>
      {isPending ? " Loading..." : null}
      <ProfilePage resource={resource} />
    </>
  );
}
4

1 回答 1

1

startTransition在调用/useTransition配置中是不可能的。您可以使用更新useEffect/useLayoutEffect后运行一些代码resource。

useEffect/useLayoutEffect(() => {
    // some code after resource state update
}, [resource])
于 2021-12-26T22:18:14.240 回答