2

我已经阅读了有关 React.Suspense 的文档，它看起来很棒，但是如何在执行 api 调用时使用它，例如使用 axios？

更具体地说，为什么这段代码不起作用？

export default function Foo(){
const [state, setState] = useState()

useEffect(()=> {
    axios.get("url")
    .then(res=> setState(res.data))
    .catch(_=> setState(null)
}, [])

return (
    <Suspense fallback="loading data">
       <div>hello {state.name}</div>
    </Suspense>
)
}

谢谢！

4

2 回答 2

3

根据 React 文档，您尝试实现的目标是可能的。有一个称为并发模式的实验性功能。你可以在 React 文档中找到实现细节。Suspense 文档链接：https ://reactjs.org/docs/concurrent-mode-suspense.html

但是有一个限制，您必须使用利用此功能的 npm 包。Relay 是 React 团队建议的。

这是文档本身中提供的代码沙箱链接。

https://codesandbox.io/s/frosty-hermann-bztrp

于 2020-07-29T03:32:19.933 回答
-5

Suspense用于异步加载Components，而不是 API。它用于延迟加载使用React.lazy.

即使您设法渲染您的组件，它也不会对您的情况产生任何影响。您将需要它用于不同的用例

于 2020-05-11T15:32:47.913 回答