Reactjs-多个api调用的优化方式是什么

Question

我正在使用useEffect、useState和fetch。在页面加载时，我得到了一个项目ID列表。然后我在这些id的基础上调用api。通过这种方式，我的应用程序会变慢，有时可能会丢失数据。我正在寻找一种优化的方法来解决这个问题。有什么建议吗？

Answer 1

只需使用promise就可以在不丢失任何数据的情况下链接您的api调用。或者，如果可以的话，编辑API，只需一个调用就可以获得项目ID和数据。

请参阅https://stackoverflow.com/a/40981298/9811156

Answer 2

如果它们应该在多个地方使用，您可以从源代码中获取它们并将其用作钩子

例如：

import { usePosts } from '../hooks'
const Comp = () => {
//                                         according to need
const { loading: pLoading, error: pError, posts } = usePosts({ limit: 10, offset: 0 })
// same for others
const { loading: cLoading, error: cError, comments } = useComments(postId)
return (
...someMagicStuff
)
}
export default Comp
hooks:
const usePosts = ({ limit, offset }) => {
const [loading, setLoading] = useState(false)
const [error, setError] = useState(false)
const [posts, setPosts] = useState([])
useEffect(() => {
setLoading(true)
// use limit offset variables
fetch(url)
.then(res => res.json())
.then(posts => {
setPosts(posts)
setLoading(false)  
})
.catch(error => setError(true))
})
return {loading, error, posts}
}