나는 후크에 익숙하지 않고 수업에 반응하는 것을 배우고 나서 약간 잃어 버렸습니다. 아래 코드에서 setDog를 Husky로 변경 한 다음 API 호출에 허스키 사진을 검색하고 가져옵니다. 그러나 개가 바뀌어도 일어나지 않습니다. 아무도 내가 어디로 잘못 가고 있는지 볼 수 있습니까?
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function ApiCalls() {
const [ data, setData ] = useState();
const [ dog, setDog ] = useState('labrador');
useEffect(() => {
const fetchData = async () => {
const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
setData(result.data.message[0]);
};
fetchData();
}, []);
const Husky = () => {
setDog('husky');
};
return (
<div>
<img alt={''} src={data} />
<button onClick={Husky}>Retrieve Husky</button>
</div>
);
}
useEffect sensivitylist는 []이므로이 useEffect는 dog 변수가 인 컴포넌트 마운트에서 실행됩니다 labrador. 따라서 버튼을 클릭하면 개를 변경하면 서버에서 새 항목을 가져올 수 없습니다. 다음과 같이 코드를 변경하십시오.
useEffect(() => {
const fetchData = async () => {
const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
setData(result.data.message[0]);
};
fetchData();
}, [dog]);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다