获取对api进行无休止调用的Reactjs
获取对api进行无休止调用的Reactjs
提问于 2019-07-19 03:17:26
我试图使用函数从服务器获取数据，但是它正在不停地调用API
我将从API返回一个数组，该数组只需要一个API调用，但是fetch()将进行无限调用，而不管端点如何。
function Posts(){
const classes = useStyles();
const [data, setData] = useState({posts : [{
title : ''
}]});
fetch('https://jsonplaceholder.typicode.com/posts')
.then( res => res.json())
.then( data => {
setData({posts: data})
})
return(
<Container className={classes.container}>
</Container>
)
}我希望它只进行一两次调用，这样就不会给服务器发送垃圾邮件。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-19 05:15:17
import React, {useState, useEffect} from 'react';包装在useEffect()中获取解决了这个问题，
function Posts(){
const classes = useStyles();
const [data, setData] = useState({posts : [{
title : ''
}]});
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then( res => res.json())
.then( data => {
setData({posts: data})
})
}, []);只有在呈现后才能运行useEffect()，如果有任何值更改，我们也可以选择运行它。
Stack Overflow用户
发布于 2019-07-19 04:33:47
为了确保只进行一个API调用，在组件的componentDidMount()生命周期方法中调用fetch函数。
componentDidMount()方法是在组件挂载到DOM之后调用的，并且在组件的生命周期中只调用一次。然后，您还可以使用setState()方法将接收到的数据设置为您的状态。
检查下面的代码，
class A extends Component{
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then( res => res.json())
.then( data => {
this.setState({posts: data})
})
}
render() {
// your code
}
}注意:在setState()方法中调用render()会导致组件重新呈现，从而在无限循环中执行。
如果您正在使用functional，那么在挂载组件时，只能使用useEffect()一次来获取数据。检查ReactJS: how to call useEffect hook only once to fetch API data
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57111371
复制相关文章
点击加载更多
相似问题
如何根据reactjs中的url在reactjs中进行Api调用？
无法对获取成功事件的API调用进行重试
ReactJS -在火狐上无休止地调用onDragEnd
Reactjs测试api调用
Reactjs中的API调用
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
