React Hook useEffect에 누락 된 종속성 : 'props'

Question

반응 후크를 사용하려고하는데 (이것은 처음입니다) 위의 componentDidMount : 'React Hook useEffect에 누락 된 종속성이 있습니다 :'props '와 같이 useEffect를 사용할 때이 오류가 발생합니다. 포함하거나 종속성 배열을 제거하십시오. 그러나, "소품"변화 할 때 임의의 바람직한 수정이 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와 함수 호출에서 undefined를 얻었습니다.

그런 다음 이렇게 시도했습니다.

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

},[props])

그러나 이것은 API에 n 개의 요청을 만듭니다.

Answer 1

상수 가져 오기에서 중괄호를 제거하십시오.

따라서 다음과 같이 보일 것입니다.

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]);
}