3 回答

TA貢獻1880條經驗 獲得超4個贊
由于過時的閉包dog,函數中設置的值永遠output不會改變。
因為您想要填充狀態mount并在用戶單擊按鈕時對其進行更改,所以您必須在函數范圍內創建調用 API 的函數并用 記憶它useCallback,相同的函數可以傳遞給onClick. 例如,
export default function Dogs() {
const [dog, set_Dog] = useState("");
console.log({ dog });
const getDogPic = useCallback(async () => {
const res = await axios.get("https://dog.ceo/api/breeds/image/random");
const {
data: { message }
} = res;
console.log("Got back", message);
set_Dog(message);
}, []);
useEffect(() => {
getDogPic();
}, []);
return (
<div>
<h2>If you like Dogs,{dog} Press Button</h2>
<button onClick={getDogPic}>Click me</button>
{dog}
<img src={dog} alt={"dog-pic"} />
</div>
);
}
Codesandbox中的工作演示
閱讀有關過時關閉的更多信息

TA貢獻1811條經驗 獲得超5個贊
獲取第一張圖像后,您可以使用useRef保留對您的函數的引用。
const click_ref = React.useRef(null);
useEffect(() => {
async function getFetch() {
const res = await axios.get("https://dog.ceo/api/breeds/image/random");
const {
data: { message },
} = res;
console.log("Got back", message);
set_Dog(message);
}
getFetch();
click_ref.current = getFetch;
}, []);
<button onClick={() => click_ref.current()}>Click me</button>
添加回答
舉報