React 18：当 Suspense 完成 Promise 时执行代码答案

【问题标题】：React 18: Executing Code When Suspense Completes PromiseReact 18：当 Suspense 完成 Promise 时执行代码
【发布时间】：2021-12-26 21:23:29
【问题描述】：

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

【问题讨论】：

but that does not work 是什么意思？
我的意思是 DO THIS CODE 永远不会执行。

标签： reactjs react-suspense

【解决方案1】：

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

useEffect/useLayoutEffect(() => {
    // some code after resource state update
}, [resource])

【讨论】：