如何通过 api 调用使用 React.Suspense？答案

【问题标题】：How to use React.Suspense with a api call?如何通过 api 调用使用 React.Suspense？
【发布时间】：2020-08-27 05:05:22
【问题描述】：

我已经阅读了有关 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>
)
}

谢谢！

【问题讨论】：

标签： reactjs axios react-suspense

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

好吧，太糟糕了，使用比加载状态更干净的东西会很棒。