Estoy tratando de mostrar todos los tokens acuñados en la página principal de mi dapp, así que creé una matriz en Solidity y le presioné el tokenId, luego intenté usar un operador de propagación y asignarlo a los tokenURI. Desafortunadamente, no he podido obtener la imagen para mostrarla.

 for (let i = 1; i <= totalSupply; i++) { //this is listing an array of minted tokens const tokenURI = await contract.methods.tokenURI(i - 1).call() const imageURI = await tokenURI.image // how should we handle the state on the front end this.setState({ NFTz: [...this.state.NFTz, imageURI] // spread operator }) // pretty sure the array could be done on the front end } console.log(this.state.imageURI) console.log(this.state.NFTz)

La consola devuelve:

 index.js:1437 Warning: Each child in a list should have a unique "key" prop. Check the render method of `App`. See fb.me/react-warning-keys for more information. in div (at App.js:136) in App (at src/index.js:7)

Lo renderiza en tarjetas MDBcards con:

 <div className="row textCenter"> {this.state.NFTz.map((key, imageURI) => { return ( <div> <div> <MDBCard className="token img" style={{ maxWidth: '22rem' }}> <MDBCardImage src={imageURI} position='top' height='250rem' style={{ marginRight: '4px' }} /> <MDBCardBody> <MDBCardTitle></MDBCardTitle> <MDBCardText></MDBCardText> <MDBBtn href={imageURI}>Download</MDBBtn> </MDBCardBody> </MDBCard> </div> </div>

PD: Err, probablemente sea más eficiente crear una matriz en el front-end, en lugar de solidez.

Gracias y Dios te bendiga