GitHub - klaytn/klaytn-nft-minter-frontend 요거 베이스로 개발하고 있는데요
문제가 NFT가 1개 있을때는 정상적으로 잘 나오는데 2개 이상되면 정상적으로 출력이 안됩니다
네트워크에는 정상적으로 발행됐는데 프론트에서 출력이 안되네요
저 소스보면
myNFTs 라는 변수로 출력을 해주고 있는데 NFTGroup 외부 모듈에서 정의가 잘못된거 같습니다
home.js 파일내용
const [myNFTs, setMyNFTs] = React.useState([]) //변수 선언부분
…
React.useEffect(()=>{
if(props.kasReducer[props.kasGetMyNFTsRoutine.SUCCESS] && props.kasReducer[props.kasGetMyNFTsRoutine.SUCCESS].result) {
setMyNFTs(props.kasReducer[props.kasGetMyNFTsRoutine.SUCCESS].result)
}
},[[props.kasGetMyNFTsRoutine.SUCCESS]])
…
.<. NFTGroup nfts={myNFTs}/> //출력부분 태그가 먹어서 .<.로 추가함
NFTGroup.js 파일 내용
export const NFTGroup = (props) => {
const width = 4
const [items, setItems] = React.useState([])
React.useEffect(()=>{
var arr = []
var col = 0
var row = 0
props.nfts.forEach((e,i) => {
col = i % width
row = Math.floor(i / width)
if( col === 0 ) {
arr.push([])
}
arr[row].push(e)
})
if( props.nfts.length > 0 ) {
col += 1
if(col > 0) {
for(var i = 0; i < width-col;i++) {
arr[row].push({id:''})
}
}
}
setItems(arr)
},[props.nfts])
// return <CardDeck key={card-deck-row-${rowIdx}
} className=‘my-4’> //
// {row.map((col,colIdx)=> {
// return <NFTCard key={card-deck-row-${rowIdx}-col-${colIdx}
} nft={col} />
// })
// }
//
NFTCard쪽은 NFT메타정보 불러오는게 끝입니다
NFTGroup에서 card deck 배열이 잘못된거같은데 이 파일은 수정한적이 없습니다
NFT 메타정보가 예제소스와 양식에 맞지않아서 일까요? 이 소스가 아니더라도 카이카스 지갑에 담긴 NFT 자산정보를 조회할 수 있는 예제 알고 계시면 공유 부탁드립니다.