상품 디테일이 안넘어가고 에러 창이 뜹니다.

[나윤주]

안녕하세요.

detail/1 헀을때

상품 디테일이 안넘어가고 에러 창이 뜹니다.

 

 

 

 

detail.js

import React, { useState, useEffect, useContext } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import styled from 'styled-components';
import './detail.scss';
import { 재고context } from './App.js';

import { CSSTransition } from 'react-transition-group';

import { Nav } from 'react-bootstrap';

let 박스 = styled.div`
padding: 30px;

;
let 제목 = styled.h4

font-size : 25px;
color : ${ props => props.색상 };
`;

function Detail(props){

let[alert, alert변경] = useState(true);
let[inputData, inputData변경] = useState('');
 
let[누른탭, 누른탭변경] = useState(true);
let [스위치, 스위치변경] = useState(false);

let 재고 = useContext(재고context);

useEffect(()=>{
//2초 후에 저 alert 창을 안보이게 함
let timer = setTimeout(()=>{ alert변경(false) }, 2000);
console.log('안녕');
return () => { clearTimeout(timer) }
},[]);
 

let { id } = useParams();
let history = useHistory();
let 찾은상품 = props.shoes.find(x => x.id == id);

return (
<div className="container">
<박스>
<제목 색상="blue">안녕하세요1</제목>
<제목 색상="red">안녕하세요2</제목>
{inputData}
</박스>

<input onChange={ (e)=>{ inputData변경(e.target.value) } } />

{
alert === true
? (<div className="my-alert2">
<p>재고가 얼마 남지 않았습니다.</p>
</div>)
: null
}

<div className="my-alert">
<p>재고가 얼마남지 않았습니다.</p>
</div>
<div className="row">
<div className="col-md-6">

</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}원</p>
 
<Info 재고={props.재고}></Info>

{/* <button className="btn btn-danger mr-2" onClick={()=>{ 재고변경()} }>주문하기</button> */}
<button className="btn btn-secondary" onClick={()=>{
history.push('/');
}}>뒤로가기</button>
</div>
</div>
<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
<Nav.Item>
<Nav.Link eventKey="link-0" onClick={()=>{ 스위치변경(false); 누른탭변경(0) }}>Option 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1" onClick={()=>{ 스위치변경(false); 누른탭변경(1) }}>Option 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2" onClick={()=>{ 스위치변경(false); 누른탭변경(2) }}>Option 3</Nav.Link>
</Nav.Item>
</Nav>

<CSSTransition in={스위치} className="wow" timeout={500}>
<TabContent 누른탭={누른탭} 스위치변경={스위치변경}/>
</CSSTransition>

</div>
)
}

function TabContent(props){

useEffect(()=>{
props.스위치변경(true);
})

if(props.누른탭 === 0){
return <div>0번째 내용입니다.</div>
}else if (props.누른탭 === 1){
return <div>1번째 내용입니다.</div>
}else if (props.누른탭 === 2){
return <div>2번째 내용입니다.</div>
}
}

function Info(props){
return <p>재고 : { props.재고[0] }</p>
}
export default Detail;

 

 

[나윤주]

 

app.js

import React, {useContext, useState} from 'react';
import { Navbar,Nav,NavDropdown,Container,Button } from 'react-bootstrap';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Data from './data.js';
import Detail from './Detail.js';
import Cart from './Cart.js';
import axios from 'axios';

import { Link, Route, Switch } from "react-router-dom";

export let 재고context = React.createContext();//범위를 생성

function App(){

let [shoes, shoes변경] = useState(Data);
let [재고, 재고변경] = useState([10,11,12,30,23,12]);
let [cart, cart변경] = useState([{id:0,name:1},{id:1,name:2}]);

return (
<div className="App">
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="/">ShoeShop</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link}>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>

 
<Switch>
<Route path="/" exact>
<div className="main-top background">
<h1>20% Season Off</h1>
<p>lorem ipsum dolor sit amet, consectetur adip</p>
<p>
<Button variant="primary">Learn more</Button>
</p>
</div>
<div className="container text-center">
 
<재고context.Provider value={재고}>

<div className="row product-wrap">
{
shoes.map((a,i)=>{
return <Product shoes={shoes[i]} key={i} i={i}/>
})
}
</div>

</재고context.Provider>

<button className="btn btn-primary" onClick={ ()=>{
//로딩중ui 띄우기
var productWrap = document.querySelector('.product-wrap')
productWrap.htmlContent =`<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>`
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{
//로딩중ui 없애기
console.log(result.data);
shoes변경([...shoes, ...result.data]);
})
.catch(()=>{
//로딩중ui 없애기
console.log('load fail');
})
} }>상품 더보기</button>
</div>
</Route>

<Route path="/detail/:id">

<재고context.Provider value={재고}>
<Detail shoes="{shoes}" 재고={재고} 재고변경={재고변경}/>
</재고context.Provider>

</Route>

<Route path="/cart">

<Cart></Cart>

</Route>

<Route path="/:id">
<div className="p-5 text-center">아무거나적었을때 이거보여주세요.</div>
</Route>
 
</Switch>

</div>
)
}

function Product(props){

let 재고 = useContext(재고context);

return (
<div className="col-md-4 text-center">

<h4>{ props.shoes.title }</h4>
<p>{ props.shoes.content }</p>
<p>{ props.shoes.price } 원</p>
<Test></Test>
</div>
)
}

function Test(){
let 재고 = useContext(재고context);
return <p>재고: {재고[0]}</p>
}

export default App;

[codingapple]

shoes라는 state를 App에서 Detail로 props로 보내는 코드가 이상한지 확인해봅시다 

[나윤주]

선생님........코드가 이상한지 모르겠어요.. 따라친건데..

[codingapple]

<Detail shoes="{shoes}" 재고={재고} 재고변경={재고변경}/>
이거가 이상해보이는군요 따옴표를 제거합시다 

[글쓴이]

글