0
224
VistasCómo mostrar los valores de un mapa en una aplicación web de reacción (javascript)
Soy nuevo en JavaScript. Tengo un mapa en el que almaceno 3 valores para cada clave. El tamaño del mapa es variable y se agrega un nuevo par clave:valores cada vez que se publica un nuevo elemento en la aplicación.
Me gustaría mostrar los contenidos actuales del mapa en la página web (idealmente en formato de tabla, pero por ahora solo quiero verlos impresos allí antes de preocuparme por eso). Todas mis búsquedas están obstruidas por personas que hablan de Google Maps.
He encontrado formas de resolver esto cuando uso una matriz, pero me gusta la estructura del mapa.
Inicializo un mapa vacío:
const productMap = new Map();Se agregan nuevos elementos al sitio y se expande el mapa:
handleSubmit = async () => { const { cost, itemName, quantity } = this.state; let result = await this.ItemManager.methods.createItem(itemName, cost, quantity).send({ from: this.accounts[0] }); const index = result.events.ProductStep.returnValues._productIndex; productMap.set(index, {itemName: itemName, cost: cost, quantity: quantity}); **// This is where map values are added. 1 key (index) has 3 values (itemName, cost and quantity)** console.log(productMap) alert("Send "+cost+" Wei to "+result.events.ProductStep.returnValues._address); };Esta función imprime en la consola exactamente como quiero, pero no estoy seguro de cómo incluir esto en la parte JSX (¿creo que ese es el término correcto?).
printValues = () => { for(let [key, value] of productMap){ console.log(value.itemName +':'+ value.cost +':'+ value.quantity) **//This logs 'Item Name' : 'cost' : 'quantity' in a separate row for each key- this is what I ideally want but displayed on the web page** return( <div>{value.itemName} {value.cost} {value.quantity}</div> ) } }He probado muchas variaciones para que esto aparezca en la página web, pero nada ha funcionado hasta ahora.
return ( <div className="App"> <header className='App-header' ><img className='App-logo' src={mylogo} alt="logo"/></header> <h1>Simply Payment/Supply Chain Example!</h1> <h2>Products for sale:</h2> {this.printValues} **//I imagine it being something along these lines where the //function produces the desired values and they are displayed on the web page.**¡Gracias por cualquier ayuda!
1 Respuestas
Responde la pregunta0
Puede iterar el mismo mapa en JSX e imprimir sus valores como lo está haciendo en console.log . Dado que es un ciclo for, debe almacenar los elementos en alguna variable y usarlos en JSX. Puede actualizar su método printValues() de esta manera.
printValues = () => { let el = []; for (let [key, value] of productMap) { console.log(value.itemName + ":" + value.cost + ":" + value.quantity); //This logs 'Item Name' : 'cost' : 'quantity' in a separate row for each key- this is what I ideally want but displayed on the web page** el.push(value.itemName + ":" + value.cost + ":" + value.quantity); } return <div>{el}</div>; };Adjunté la caja de arena usando un mapa y mi estilo de usar una matriz de objetos en el estado. Usted puede comprobarlo.
