如何使用 onClick 事件刷新 React 中的 API？请帮忙

Question

我正在学习 React，我正在从事一个调用 API 以在屏幕上设置图片库的项目。我想通过单击按钮刷新渲染的图像。该按钮位于不同的组件中，因此我将函数作为道具传递。我卡住了。

这是我的代码：

import React, { useState, useEffect } from "react";`

function Main() {
  const [pics, setPics] = useState([]);

  useEffect(() => {
    fetch(
      "https://api"
    )
      .then((res) => res.json())
      .then((data) => {
        setPics(data);
      });
  }, []);

  let dogCard = pics.map((card) => (
    <Card key={card.id} img={card.url} />
  ));

  function newPic() {
    ***This function needs to trigger the pic reload***
  }

  return (
    <div>
      <PupBtn handleClick={newPic} />
      <div>{dogCard}</div>
    </div>
  );
}

export default Main;

每次页面按预期加载时，API 调用都会呈现图像。此外，函数 newPic() 已正确挂接，当我在主体中有一个 console.log() 时，它会在控制台中触发。

我已经尝试再次设置状态，但它不起作用。我也尝试了不同的 API 获取，但我知道这不是最佳解决方案。