問題

這是我的程式碼:

 
const useMyFetch = (url, options) => 
{
  const [response, setResponse]   = React.useState(null);

  React.useEffect(() => 
  {
    console.log("going to fetch ", url);

    fetch(url, options).then(async function(response) 
    {
      var json = await response.json();
      setResponse(json.message);
    });

  }, [ url ]); 

  return response;
};



function Example() 
{
  const res = useMyFetch("https://dog.ceo/api/breeds/image/random", { method: 'GET' });

  if (!res) 
  {
    return <div>loading...</div>
  }

  return <img src={res} alt="an image" />;
}


 

看起來一切都很好...除非我將useEffect的第二個引數從[url]替換為[url,options]. 當’options’存在時,我們進入眾所周知的無限迴圈..但是在這個陣列中使用它是合乎邏輯的.這裡有什麼問題? 謝謝

  最佳答案

{ method: 'GET' }定義為常量物件,以便options引數始終相同,這是一個例子:

 const options = { method: 'GET' };
function Example() {
  const res = useMyFetch("https://dog.ceo/api/breeds/image/random", options);
  ...
}
 

否則,每次呼叫useMyFetch時,options都會被視為更改,因為{ method: 'GET' } === { method: 'GET' }false.

  相同標籤的其他問題

javascriptreactjsreact-hooks