メニュー

【React】ESLintのエラー(Either include it or remove the dependency array)を強制的に解消したときのメモ

  • 投稿日
  • 著者 ひがし
  • カテゴリー React

以下のようなコードを入れたとき、「React Hook useEffect has a missing dependency: ‘options’. Either include it or remove the dependency array react-hooks/exhaustive-deps」というエラーが発生した。

  const options: AxiosRequestConfig = {
    url: '/' + path
  }
 
 useEffect(() => {
    async function fetchData() {
      const response = await axios(options);
      window.setTimeout(() => {
        setMyData({
          isLoad: true,
          data: response.data
        })
      }, 2000)
    }
    fetchData();
  },[path])

上記のコードの場合だと、optionsをuseEffectの中に入れてしまえばエラーを解消できる。

 useEffect(() => {
    const options: AxiosRequestConfig = {
      url: '/' + path
    }
    async function fetchData() {
      const response = await axios(options);
      window.setTimeout(() => {
        setMyData({
          isLoad: true,
          data: response.data
        })
      }, 2000)
    }
    fetchData();
  },[path])

本来はコードを直せる方がいいが、ESLintのエラーを強制的に消すことも可能。

ESLintのエラーを強制的に消すサンプル

以下のコメントアウトをコード内に追加すると、ESLintのエラーを強制的に消すことができる。

// eslint-disable-next-line

サンプルコードを例にすると、以下のようにコメントアウトを入れる。

  const options: AxiosRequestConfig = {
    url: '/' + path
  }
 
 useEffect(() => {
    async function fetchData() {
      const response = await axios(options);
      window.setTimeout(() => {
        setMyData({
          isLoad: true,
          data: response.data
        })
      }, 2000)
    }
    fetchData();
    // eslint-disable-next-line
  },[path])
ESLint