每次調用相同的 API 時調用 useEffect 並重新渲染

Question

On every call of the API I get a new image link ( https://dog.ceo/api/breeds/image/random this is the API I am calling), I am using useEffect hook and calling the API.

每次單擊按鈕時，我都想點擊 API，獲取新值，然后重新渲染圖像。 當我將“狗”作為依賴項傳遞給useEffect時，我 go 進入一個無限循環，我想要的只是當我單擊要更新圖像的按鈕時。

  const [dog, setDog] = useState('')

  useEffect(() => {

    const getDogs = async () => {
      const dogsFromServer = await fetchDogs()
      setDog(dogsFromServer.message)
    }
    getDogs()
  }, [])

  const fetchDogs = async () => {
    const res = await fetch('https://dog.ceo/api/breeds/image/random')
    const data = await res.json()
    console.log(data.message)
    return data
  }

  const changeDog = ()=> {
    alert("changeddog")
  }

  return (
    <div className="App">
      <img src={dog}/>
      <button onClick={()=>fetchDogs()}>Change Image<button/>
    </div>
  );

Answer 1

我會將更新的dog state 也移動到fetchDogs function 中，您可以從useEffect和按鈕的onClick處理程序中調用。

const [dog, setDog] = useState('');

useEffect(() => {
  fetchDogs(); // <-- load dog state on initial render
}, []);

const fetchDogs = async () => {
  try {
    const res = await fetch('https://dog.ceo/api/breeds/image/random');
    const data = await res.json();
    console.log(data.message);
    setDog(data.message);
  } catch (error) {
    // log error, etc..
  }
};

const changeDog = ()=> {
  alert("changeddog")
}

return (
  <div className="App">
    <img src={dog}/>
    <button
      onClick={fetchDogs} // <-- load on button click
    >
      Change Image
    <button/>
  </div>
);

Answer 2

您必須在 click 事件上執行，而不是在useEffect上獲取數據。 像這樣的東西：

function YourComponent(){
  const [dog, setDog] = useState('');

  const fetchDogs = async () => {
    const res = await fetch('https://dog.ceo/api/breeds/image/random');
    const data = await res.json();
    return data;
  };

  const handleGetDogs = async () => {
    const dogsFromServer = await fetchDogs();
    setDog(dogsFromServer.message);
  };

  return (
    <div className="App">
      <img src={dog}/>
      <button onClick={handleGetDogs}>Change Image<button/>
    </div>
  );

}

Answer 3

首先，將fetchDogs function 移出組件並將getDogs定義useEffect ，然后從changeDog調用getDogs並在按鈕 ZB783CAZB20CE5587D07A 中使用onClick ：

const fetchDogs = async () => {
    const res = await fetch('https://dog.ceo/api/breeds/image/random');
    const data = await res.json();
    console.log(data.message);
    return data;
});

function App() {
  const [dog, setDog] = useState('');

  const getDogs = async () => {
    const dogsFromServer = await fetchDogs();
    setDog(dogsFromServer.message);
  }

  useEffect(() => {
    getDogs();
  }, []);

  
  const changeDog = ()=> {
    // alert("changeddog");
    getDogs();
  }

  return (
    <div className="App">
      <img src={dog}/>
      <button onClick={changeDog}>Change Image<button/>
    </div>
  );
}

工作示例：