Reactjs Suspense React 无法获取数据

I'am trying to use suspence to render a fallback while the Promise is not solved.我正在try 使用悬念来在promise 未解决时提供回退.我做错了什么？

它应该在获取promise 不返回数据时呈现回退.但是，当我try 从浏览器获取数据时，回退不会出现.

export const MainFlow = () => {
    const URL_BASE = 'https://api.thedogapi.com/v1/images/search'
    const [data, setData] = useState<any[]>([])

    const fetchData = async () => {
        const response = await httpService.request({
            url: `${URL_BASE}?limit=10`,
            method: 'get',
            headers: { 'x-api-key': 'some-key' }
        })
        setData(response.body)
    }

    useEffect(() => {
        fetchData()
    }, [])

    const DogImage: FC<DogImageProps> = ({ url }) => {
        return (
            <img src={url} alt="I'am a doggo." className="mfone__dog-images" />
        )
    }

    return (
        <div id="mfone__dog-container">
            <Suspense fallback={<div>Loading...</div>}>
                <div id="mfone__images-box">
                    {data
                        ? data.map((element, index) => {
                                return (
                                    <DogImage key={index} url={element.url} />
                                )
                          })
                        : null}
                </div>
            </Suspense>
            <div id="mfone__links-box">
                <Link to="/" className="mfone__dog-links">
                    Back to Home page
                </Link>
                <button
                    onClick={() => fetchData()}
                    className="mfone__dog-links"
                >
                    More Doggos
                </button>
            </div>
        </div>
    )
}

我曾try 将悬疑标签放在id为"mfone__images-box"的div中，但仍然不起作用:

return (
        <div id="mfone__dog-container">
            <div id="mfone__images-box">
                <Suspense fallback={<div>Carregando...</div>}>
                    {data
                        ? data.map((element, index) => {
                                return (
                                    <DogImage key={index} url={element.url} />
                                )
                          })
                        : null}
                </Suspense>
            </div>
            <div id="mfone__links-box">
                <Link to="/" className="mfone__dog-links">
                    Back to Home page
                </Link>
                <button
                    onClick={() => fetchData()}
                    className="mfone__dog-links"
                >
                    More Doggos
                </button>
            </div>
        </div>
    )