Así que tengo esta función aquí:
const printCardList = (arr) => { const uo_list = document.getElementById("verify_list"); arr.forEach((card) => { let list_item = document.createElement("LI"); let str = card.name + " " + card.mana_cost + " " + card.set_name; list_item.appendChild(document.createTextNode(str)); uo_list.appendChild(list_item); }); };y se supone que debe insertar elementos de lista y desordenar la lista de una matriz de objetos de tarjeta.
return( <div className="list-confirm"> <h3> Please confirm card list </h3> <ul id="verify_list"></ul> <br /> <button onClick={getCardList}>Confirm</button> </div> );Si hago un console.log en arr, puedo verificar que se trata de una matriz de tarjetas, pero si hago un console.log card desde dentro de for each, ni siquiera se activa. Es como si el for each no se ejecutara. ¿Alguien tiene una idea de por qué sucede esto?
Deberías cambiar el onClick . Más precisamente, llame al método después de obtener elementos del método getCardList() .
Esto es un ejemplo:
const printCardList = (arr) => { const uo_list = document.getElementById("verify_list"); arr.forEach((card) => { let list_item = document.createElement("li"); let str = card.name + " " + card.mana_cost + " " + card.set_name; list_item.appendChild(document.createTextNode(str)); uo_list.appendChild(list_item); }); }; // this is a test method. Not the real one const getCardList = () => { return [ { name: "Card", mana_cost: 0, set_name: "Set: Card" } ]; }; <div className="list-confirm"> <h3> Please confirm card list </h3> <ul id="verify_list"></ul> <br /> <button onClick="printCardList(getCardList())">Confirm</button> </div>No estoy seguro de lo que está tratando de hacer, la primera parte de su código es javascript simple que manipula el DOM, mientras que la segunda parte es un objeto js de reacción. Normalmente no desea mezclar estos dos, ya sea que codifique su javascript como parte del html, como la primera parte, o, si desea crear una matriz de tarjetas en reacción, puede hacer algo como:
let cardList = arr.map(card => { listItem = <li>{card.name + " " + card.mana_cost + " " + card.set_name }</li> return listItem; }) return( <div className="list-confirm"> <h3> Please confirm card list </h3> <ul id="verify_list">{cardList}</ul> <br /> <button onClick={getCardList}>Confirm</button> </div> );lo que hice fue asignar la lista en sí a una variable llamada 'cardList', los objetos JSX son solo objetos de JavaScript, por lo que puede asignarlos a una variable o regresarlos desde una función. para colocar la lista de tarjetas dentro de la página (o componente), puede usar la notación {}, que incrustará el objeto cardList como parte del objeto JSX devuelto.
Gracias por todos los consejos. En retrospectiva, debería haberme apegado a lo que estaba aprendiendo y no tratar de hacer estilo libre. React se trata de usar estados. Entonces, en lugar de tener una función que generará HTML a partir de una matriz de datos, tuve que usar "el estado". Luego codifique el procesamiento para recorrer la lista de tarjetas cuando se presiona el botón.
const [state, setState] = useState([]); const card_list= ()=> {...} const changeState = ()=> {setState(card_list)} return( <div className="list-confirm"> <h3> Please confirm card list </h3> <ul> {state.map((card) => ( <li>{card.name}</li> ))} </ul> <br /> <button onClick={changeSate}>Confirm</button> </div> );