尝试获取数据并使用 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();
  }, [])