Reactjs 在 React 18 中，useEffect 的函数是否保证在 Suspense promise 完成后运行

我有一个简单的主细节场景，在左侧，我通过REST服务加载使用useSwr的城市列表，然后在右侧，我有一个城市细节窗口，它也使用useSwr加载单个城市(从单击左侧或首次加载).

在下面的代码中，我调用useEffect函数，然后在状态设置调用(setSelectedCityId)中使用从useSwr检索到的数据.

这是可行的，而且总是有与cities数组相关的数据，但我想知道是否可以保证useEffect的函数在悬念promise 完成后运行(看起来是这样的).

以下是我的简单代码:

import { Suspense, useEffect, useState, useTransition } from "react";
import useSwr from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

function CityDetailFallback() {
  return <div>Loading (CityDetail)</div>;
}

function CityDetail({ selectedCityId }) {

  function CityDetailUI({ selectedCityId }) {
    const { data: city } = useSwr(
      selectedCityId
        ? `http://localhost:3000/api/city/${selectedCityId}`
        : null,
      fetcher,
      {
        suspense: true,
      }
    );
    
    if (!city) {
      return <div>loading city...</div>
    }
    
    return (
      <div className="row">
        <div className="col-9">
          <div>{JSON.stringify(city)} </div>
        </div>
      </div>
    );
  }

  return (
    <Suspense fallback={<CityDetailFallback />}>
      <CityDetailUI selectedCityId={selectedCityId}></CityDetailUI>
    </Suspense>
  );
}

function CityList({
  setSelectedCityId
}) {
  //
  const { data: cities } = useSwr("http://localhost:3000/api/city", fetcher, {
    suspense: true,
  });

  useEffect(() => {
    setSelectedCityId(cities[0].id);
  }, []);

  return (
    <div className="col-3">
      {cities.map((city) => {
        return (
          <div key={city.id}>
            <button
              onClick={(e) => {
                setSelectedCityId(city.id);
              }}
            >
              {city.city}
            </button>
          </div>
        );
      })}
    </div>
  );
}

export default function App() {
  const [selectedCityId, setSelectedCityId] = useState();

  return (
    <div className="container">
      <a href="/">Site Root</a>
      <hr />

      <Suspense fallback={<div>Loading...</div>}>
        <div className="row">
          <div className="col-3">
            <b>CITY LIST</b>
            <hr />
            <CityList
              setSelectedCityId={setSelectedCityId}
              selectedCityId={selectedCityId}
            />
          </div>
          <div className="col-9">
            <div>
              <b>CITY DETAIL (TOP ROW SELECTED AUTOMATICALLY)</b>
              <hr />
              <CityDetail selectedCityId={selectedCityId} />
            </div>
          </div>
        </div>
      </Suspense>
    </div>
  );
}

注意:我无法创建代码Sandbox ，因为当前useSwr中有一个关于悬念的bug.https://github.com/vercel/swr/issues/1906我目前正在使用Create React应用程序进行测试，并为REST调用使用一个虚拟api端点.抱歉:(