상세페이지 100개 만들기 에서 detail/3 이상에서의 오류

[뿌뿌]

detail.js

function Detail(props) {
 
  let {id} = useParams();
  // useParams 반환값은 객체 그 안에 url의 모든 파라미터 담겨있음
// 그래서 destructuring 을 사용해 변수에 담아줌

return(
<div className="container">
      <div className="row">
        <div className="col-md-6">
         
         
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>상품설명</p>
          <p>120000원</p>
         
        </div>
      </div>
</div>
);
}
export default Detail;

여기서 어떤걸 추가를 해야할까요? 감이 안잡히네요

 

[codingapple]

안에 상품설명을 조건부로 보여주면 되겠군요 if문이나 삼항연산자 써서 

id가 3 이상이거나 없는 숫자면 상품이없습니다 글자를 출력하면 될듯요 

[뿌뿌]

제가 이해를 잘 못해서 다시한번 여쭤볼게요!

저 코드문에서 3이상의 detail페이지가 뜨지 않는 현상이어서

나타내고 싶은데 삼항연산자를 쓰면 되는건가요?

[뿌뿌]

메인

/*eslint-disable */
import React,{useState} from 'react';

import { Link } from 'react-router-dom';

import data from './data.js' ;
import './ReviewMain.css' ;
import axios from 'axios';

function ReviewMain(){

  let [shoes,shoes1] = useState(data);

  return(
   
  <div className='main'>
<div className='headline'>
  <h3>기관검색</h3>
  <hr/>
  </div>
 
   <div className='container'>
    <div className='row'>
      {
        shoes.map((a,i)=>{
          return <Card shoes={shoes[i]}  i ={i} key={i}/>
        })
      }    
    </div>
     </div>
     <button className='btn btn-primary' onClick={()=>{
      //axios.post('서버url',{id:'멀티캠퍼스',pw:'1234'}).then()

       axios.get('https://raw.githubusercontent.com/9598dohyun/image/main/data2.json')
     .then((result)=>{  //.then 은 ajax가 성공했을때 나오는 코드
     
      shoes1([...shoes,...result.data]);//[...shoes] 슈즈를 벗기고 다시 [] 로 감싸는 복사본
      console.log(result.data);
    })
     .catch(()=>{
    console.log('실패')
     })
     }}>더보기</button>
  </div>
  )
}
function Card(props){
 
  return(
   
      <div className="col-md-4" >
       
     <button><Link to={"/detail/"+(props.i)}>
     
         </img> </Link></button>
        <h4>{props.shoes.title}</h4>
       
        </div>  
       
  )
}

export default ReviewMain;

 

Detail.js

import React,{useState,useEffect} from 'react';
import {useParams} from 'react-router-dom';

function Detail(props,) {
 
  let {id} = useParams();
  // useParams 반환값은 객체 그 안에 url의 모든 파라미터 담겨있음
// 그래서 destructuring 을 사용해 변수에 담아줌

return(
 
<div className="container">
    {[id]<6
      ?<div className="row">
        <div className="col-md-6">
           
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>상품설명</p>
          <p>120000원</p>
        </div>
      </div>
      :null}
      {/* 더보기 이후 */}
      {[id]>5
      ?<div className="row">
       <div className="col-md-6">
         
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5"></h4>
          <p>상품설명</p>
          <p>120000원</p>
        </div>
      </div>
      :null
      }

</div>
);
}

export default Detail;

일단은 해결을 했습니다 그런데 detail.js에서 id>6에서 title 부분을 어떻게 가져와야하는지 또 막혔습니다.. ReviewMain에서 result.data를  cosole.log 해본 결과 배열은 확인됐습니다.

근데 거기서 title만  어떻게 가져오는지 잘 몰라서 계속 고민입니다.

[codingapple]

두 문제 전부 3번상품이 변수나 state에 없어서 그렇습니다 

/detail/3 접속시 상품을 가져오라고 ajax 코드를 짜거나 그러면 됩니다 

 

[글쓴이]

글