신발 쇼핑몰 프로젝트에서
상품이미지를 클릭하면 해당 상품의 디테일페이지로 이동하는걸 구현하려고 하는데요,
id 가 1,2,3까지는 잘되는데
더보기해서 불러온 상품의 이미지를 클릭하면 찾은상품.title, 찾은상품.content, 찾은상품.price 를 읽을수없다는 에러가 발생이 됩니다
그래서 디버깅을 해보니 Detail.js 의 props에 처음3개 상품데이터만 전달이 되고
더보기로 가져와서 추가된 6개의 상품데이터는 전달이 되지않아서 발생하는 오류로 생각이 되는데
ax.get('https://codingapple1.github.io/shop/data${dataPage}.json')
.then((r) => {
shoesChange([...shoes, ...r.data]);
})
.catch(() => {
alert('추가상품이 없습니다.');
더보기변경(false)
});
App.js 에서 위 코드중 shoesChange([...shoes, ...r.data]); 으로 shoes state를 r.data와 합치고
<Route path="/detail/:page">
<Detail shoes={shoes} />
</Route>
Detail 컴포넌트에 합친데이터를 전달해주는 것으로 생각을 했는데 예상외로 에러가 발생해서
Detail.js의 상위컴포넌트인 App.js 에서 Deail컴포넌트에 더보기로 가져온 상품데이터를 전달해주려면 어떻게 해야할지 조언주시면 감사하겠습니다
App.js 코드
import { useState } from 'react';
import { Navbar, Container, NavDropdown, Nav } from 'react-bootstrap'
import './App.css';
import Data from './data'
import { Link, Route, Switch } from 'react-router-dom'
import Detail from './Component/Detail';
import ax from 'axios';
function App() {
let [shoes, shoesChange] = useState(Data);
let [dataPage, dataPageChange] = useState(2);
let [더보기, 더보기변경] = useState(true);
return (
<div className="App">
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to="/">Home</Nav.Link>
<Nav.Link as={Link} to="/detail">Detail</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Route exact path="/">
<div className="jumbotron">
<div className="text-area">
<h1 className="display-4">Hello, Shoes!</h1>
<p className="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr className="my-4" />
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p className="lead">
<a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div className="container">
<div className="row">
{
shoes.map((e, i) => {
return (<Product shoes={e} index={i} key={i}></Product>)
})
}
</div>
{
더보기 === true
? (<button className="btn btn-primary" onClick={() => {
dataPageChange(dataPage + 1);
ax.get('https://codingapple1.github.io/shop/data${dataPage}.json')
.then((r) => {
shoesChange([...shoes, ...r.data]);
})
.catch(() => {
alert('추가상품이 없습니다.');
더보기변경(false)
});
}}>더보기</button>)
: null
}
</div>
</Route>
<Route path="/detail/:page">
<Detail shoes={shoes} />
</Route>
</div>
);
}
function Product(props) {
return (
<div className="col-md-4">
<a href={'detail/${(props.index)}'}><img src={'https://codingapple1.github.io/shop/shoes${props.index + 1}.jpg'} width="100%" /></a>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.content}</p>
<p>{props.shoes.price}</p>
</div>
)
}
export default App;
