悬念反应不用于获取数据

Question

我正在试图使用悬念在未解决诺言的同时渲染后备。我在做什么错？

它应该渲染后备，而提取承诺不会返回数据。但是，当我尝试从浏览器中获取数据时，就不会出现后备。

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

我试图将悬疑标签放入具有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

截至目前，悬疑仅在实现组件的懒惰加载时起作用，它不支持您的用例，这就是数据获取。在这种情况下，您可以创建一个加载状态，该加载状态设置为true，一旦数据获取功能开始执行，然后将其设置为false完成后，这样您可以根据该状态显示加载/获取UI。

更新： 悬念现在可以在实现React Server组件时用于数据获取目的，这些组件已从实验转变为全面支持。 next.js v13 已开始在其仍然实验的app中开始实现React Server组件目录功能。