재고가 빈칸으로 나오는데 이유가 뭘까요??
1. 부모 컴포넌트
function App() {
let [shoes, shoes변경] = useState(Data);
let [재고, 재고변경] = useState(10,11,12);
2. 자식 컴포넌트
function Detail(props){
let {id} = useParams();
let history = useHistory();
let [inputData,inputData변경] = useState('');
useEffect(()=>{
let 타이머 = setTimeout(()=>{
alert변경(false)
},2000);
},[]);
return(
<div className="container">
<박스>
<제목 className="red">상세페이지</제목>
</박스>
{inputData}
<input onChange={(e)=>{inputData변경(e.target.value)}}></input>
{
alert == true
? (
<div className="my-alert">
<p>재고가 얼마 남지 않았습니다</p>
</div>
)
: null
}
<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}</p>
<Info 재고={props.재고}></Info>
<button className="btn btn-danger" onClick={()=>{
props.재고변경([9,11,12])
}}>주문하기</button>
<button className="btn btn-danger" onClick={()=>{history.goBack();}}>뒤로가기</button>
</div>
</div>
</div>
)
}
function Info(props){
return(
<p>재고 : {props.재고[0]}</p>
)
}
export default Detail;
이렇게 했는데 화면에 '재고 : ' 이렇게만 뜨네요 ㅠㅠㅠ 이유가 뭘까요?
혹시나해서 Array로 바꿔봤는데, 이건 아예 오류가 뜨네요...
function App() {
let [shoes, shoes변경] = useState(Data);
let [재고, 재고변경] = useState[10,11,12];
