在试图获取数据并使用React渲染时引起的无限循环

Question

我有一个问题获取数据和渲染它与React。当我击中一个返回单个对象的API时，它工作得很好，但是当我查询一个新闻API时，它只是继续在无限循环中运行，即使我限制了我想返回的文章的数量。我用useState保存返回数据，并用useEffect获取它。我做错了什么?这是我的代码。

const classes = useStyles();
const [data, setData] = useState({});
const [loading, setLoading] = useState(true);
useEffect(() => {
const getData = async () => {
const url = 'https://gnews.io/api/v4/search?q=malware&lang=en&max=3&token=MY_API_TOKEN'
const res = await fetch(url);
const data = res.json();
console.log(data);
setData(data);
setLoading(false);
};
getData();
})


return (
<div className={classes.root}>
<Grid 
container
direction="row"
justifycontent="center"
alignItems="center"
spacing={8}
>
<Grid item xs={12}>
<Paper className={classes.paper1}>
<Typography variant="h5" className={classes.title}>
"This book is dedicated to anyone and everyone who understands that
hacking and learning is a way to live your life, not a day job or 
semi-ordered list of instructions found in a thick book." -The Shellcoder's Handbook
</Typography>
</Paper>
</Grid>
<Grid container spacing={2}>
<Grid item xs={4}>
<Paper className={classes.paper2}>
<h1>Title of news article</h1>
<p>news story explination</p>
<p>image</p>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper2}>
<h1>Title of news article</h1>
<p>news story explination</p>
<p>image</p>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper2}>
<h1>{data.title}</h1>
<p>news story explination</p>
<p>image</p>
</Paper>
</Grid>
</Grid>
</Grid>
</div>
)
};```

Answer 1

您需要在useEffect中添加依赖项。如果你只想调用getData一次，你可以像这样添加空的依赖项[]

useEffect(() => {
const getData = async () => {
const url = 'https://gnews.io/api/v4/search?q=malware&lang=en&max=3&token=MY_API_TOKEN'
const res = await fetch(url);
const data = res.json();
console.log(data);
setData(data);
setLoading(false);
};
getData();
}, [])