reactjs - Suspense React 无法获取数据

Question

我正在尝试使用 Suspense 在 Promise 未解决时呈现后备。我做错了什么？

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

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

我尝试将 Suspense 标签放入 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>
    )

Answer 1

截至目前，Suspense 仅在实现组件的延迟加载时有效，它不支持您的数据获取用例。在这种情况下，您可以创建一个加载状态，一旦数据获取函数开始执行就设置为 true，然后在完成后设置为 false，这样您可以根据该状态显示加载/获取 UI。

更新:Suspense 现在可以在实现 React 服务器组件时用于数据获取目的，这些组件已从实验性转变为完全支持。 Next.js v13已开始在其仍处于实验阶段的 app 目录功能中实现 React Server Components。