React Hook useEffectに依存関係がありません: 'props'

Sep 11 2020

私はreactフックを使用しようとしています(これは初めてです)が、上記のcomponentDidMountのようにuseEffectを使用すると、このエラーが発生します: 'React Hook useEffectには依存関係がありません:' props '。それを含めるか、依存関係配列を削除してください。しかし、「小道具」とき変更され、任意の好適な修正がuseEffectコールの「小道具」オブジェクトの外側をdestructureすることであるので、プロペラの変更およびuseEffect内のそれらの特定の小道具」を参照します

APIにGETリクエストを送信しようとしていますが、URLにいくつかの小道具が必要です。これは私のコードです:

function SomeComponent(props) {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${props.obj.id}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        props.totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, []);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

私はこれらの解決策を探して試しましたが、うまくいきません:

const { id } = props.obj.id;
const {totalStats} = props.totalStats

useEffect(()=>{
//Here is the code
//I replace the $ {props.obj.id} by the id and the function props.totalStats by //totalStats
},[id,totalStats]

そうすることで、idと関数の呼び出しで未定義を取得しました。

それから私はそれをこのようにしてみました:

useEffect(()=>{
//here is the code like the first one

},[props])

しかし、これはAPIにn回のリクエストを行います

回答

1 YunusTabakoglu Sep 11 2020 at 05:51

定数インポートから中括弧を削除します。

したがって、次のようになります。

function SomeComponent(props) {
  const objId = props.obj.id;
  const totalStats = props.totalStats;
  
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${objId}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, [objId, totalStats]);
}