더보기 버튼 클릭 시 똑같은 데이터 불러옴

[rigood]

더보기 버튼 클릭 시 이미지는 달라지는데 제목, 내용, 가격은 첫번째 줄에 속한 데이터가 동일하게 나오는데 이 경우는 어떻게 해야할까요??ㅠㅠ

아래는 관련된 소스부분입니다.


              {
                shoes.map((a, i)=>{
                  return(
                    <Card shoes={shoes[i]} i={i} key={i}></Card>
                  )
                })
              }

            <button onClick={()=>{
              axios.get('https://codingapple1.github.io/shop/data2.json')
              .then((result)=>{ // 성공
                console.log(result.data);
                
                let copy = [...shoes, ...data];
                setShoes(copy);
              })
              .catch(()=>{  
                console.log('실패했다ㅠ')
              })
            }}>더보기</button>

function Card(props){
  return(
    <div className="col-md-4">
      {/* < img src={process.env.PUBLIC_URL + '/img/재롱이2.png'} style={{backgroundSize : 'cover', height : '400px'}}></img> */}
      < img src={'https://codingapple1.github.io/shop/shoes' +  (props.i+1) + '.jpg'} width="80%"></img>
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  )
}

[codingapple]

  let copy = [...shoes, ...result.data] 해봅시다

[글쓴이]

글