안녕하세요 선생님!!
버튼누르면 추가로 데이터가져오는 숙제에서 추가로 안가져와집니다ㅜ
console창에서도 에러메세지도 안떠요..
이전에 제가 조금 다르게 한 부분이 문제가 되있나 싶어서 선생님코드랑 똑같이 쳤는데도 반응이 없네요.
어디가 잘못된걸까요...
import { useState } from "react";
import { Button, Navbar, Container, Nav, Row, Col } from "react-bootstrap";
import "./App.css";
import data from "./data.js";
import Detail from "./pages/detail.js";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import axios from "axios";
function App() {
let [shoes, setShoes] = useState(data);
let navigate = useNavigate();
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">portfolio</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link
onClick={() => {
navigate("/");
}}
>
Home
</Nav.Link>
<Nav.Link
onClick={() => {
navigate("/detail");
}}
>
Project
</Nav.Link>
</Nav>
detail
</Container>
</Navbar>
<Routes>
<Route
path="/"
element={
<>
<div className="main-bg">
< img src={"/bg.png"} width="90%" />
</div>
<Container>
<Row>
{data.map(function (a, i) {
return <Module shoes={shoes[i]} i={i + 1} key={i}></Module>;
})}
<button
onClick={() => {
axios
.get("https://codingapple1.github.io/shop/data2.json")
.then((res) => {
let copy = [...shoes, ...res.data];
setShoes(copy);
})
.catch(() => {
console.log("실패");
});
}}
>
더보기
</button>
</Row>
</Container>
</>
}
/>
<Route path="/detail/:id" element={<Detail shoes={shoes}></Detail>} />
<Route path="*" element={<div>없는페이지</div>} />
</Routes>
</div>
);
}
function Module(props) {
return (
<Col md={4}>
<img
src={"https://codingapple1.github.io/shop/shoes" + props.i + ".jpg"}
width="80%"
/>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.price}</p>
</Col>
);
}
export default App;
