안녕하세요 선생님
아래 ajax 강의 응용 문제 3개 풀고 있는데, count 변수가 계속 초기화 되어서 못 하고 있습니다...
응용1. 버튼을 2번 누르면 7,8,9번 상품을 가져와서 html로 보여주려면?
응용2. 버튼을 3번 누르면 더 상품이 없다고 안내문을 띄우려면?
응용3. 버튼을 누른 직후엔 "로딩중입니다" 이런 글자를 주변에 띄우고 싶으면?
count 가 onclick 함수 안에서는 +1 이 실행되는데, onclick 끝난 후에 다시 0이 됩니다..
js 버튼 클릭 횟수 세는 예제들도 찾아서 봤는데도 해결을 못해서 질문 남깁니다 ㅠㅠ
function App() {
let [shoes, setShoes] = useState(data);
let navigate = useNavigate();
let count = 0;
return (
<div className="App">
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">Shop</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link onClick={() => {navigate('/')}}>Home</Nav.Link>
<Nav.Link onClick={() => {navigate('/detail/0')}}>Detail</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Routes>
<Route path='/' element={
<>
<div className='main_bg'></div>
<Container>
<Row>
{
shoes.map(function(a,i){
return (
<Card a = {a} i = {i}></Card>
)
})
}
</Row>
</Container>
{ count < 2 ?
<button onClick={() => {
count = count + 1;
console.log(count) // count = 1 출력
axios.get("https://codingapple1.github.io/shop/data" + (count+1) + ".json")
.then((result) => {
let copy = [...shoes];
copy = copy.concat(result.data);
setShoes(copy);
})
.catch(() => {
console.log('failed')
})
}}>더 보기</button>
: null
}
{console.log(count) /* count = 0 출력 */}
</>
}/>
