React Hook useEffect에 종속성이 누락되었습니다. '리스트'

React Hook useEffect에 종속성이 누락되었습니다. '리스트'

다음 코드를 실행하면 다음 오류가 나타납니다.

React Hook useEffect에 종속성이 누락되었습니다. '리스트'입니다.포함하거나 의존관계 어레이 리액트 훅/exhaustive-dep을 삭제합니다.

경고의 이유를 찾을 수 없습니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Form from './Form';

const App = () => {
  const [term, setTerm] = useState('pizza');
  const [list, setList] = useState([]);

  const submitSearch = e => {
    e.preventDefault();
    setTerm(e.target.elements.receiptName.value);
  };

  useEffect(() => {
    (async term => {
      const api_url = 'https://www.food2fork.com/api';
      const api_key = '<MY API KEY>';

      const response = await axios.get(
        `${api_url}/search?key=${api_key}&q=${term}&count=5`
      );

      setList(response.data.recipes);
      console.log(list);
    })(term);
  }, [term]);

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Recipe Search</h1>
      </header>
      <Form submitSearch={submitSearch} />
      {term}
    </div>
  );
};

export default App;

useEffect 내에서 로그 기록 중list:

console.log(list);

위의 행을 삭제하거나listuseEffect 의존관계로 이동합니다. 따라서 이 행을 변경합니다.

}, [term]);

로.

}, [term, list]);

다음과 같이 기록하여 보풀 경고를 비활성화할 수 있습니다.

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);

설명을 삽입하여 비활성화할 수 있습니다.

// eslint-disable-next-line

그dependency array- 이 파라미터는 의 두 번째 옵션 파라미터입니다.useEffect기능.React는 의 첫 번째 파라미터에 정의된 기능을 호출합니다.useEffect내부 파라미터가 기능하는 경우dependency array이전 렌더링에서 변경됩니다.

그럼 다른 곳에 두실 필요는 없습니다.list가변 내부dependency array.

  useEffect(() => {
    // do some

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [term]);

이 경고는 useEffect 내에서 상태 '리스트'가 사용되고 있기 때문에 발생합니다.따라서 react는 'list'가 종속성에 추가되지 않으므로 'list' 상태를 변경해도 이 효과가 다시 실행되지 않도록 경고합니다.
자세한 내용은 이쪽을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/55938884/react-hook-useeffect-has-a-missing-dependency-list