Tengo un código que genera mi interfaz de usuario de reacción y funciona con una lista de idiomas para generar casillas de verificación para la selección de idioma. Por ejemplo, cuando está en estado
languages = {English: true, French: false}sin embargo, cuando lo cambio a un objeto que contiene los valores de la base de datos, no aparece ningún error, pero no se carga nada.
[ { "language_name": "English", "lang_num": 1, "checked": false }, { "language_name": "Mandarin Chinese", "lang_num": 2, "checked": false }, ]El código es:
{ Object.entries(this.props.languages).forEach(([key, value]) => { console.log(this.props.languages[key].language_name), <label id="checkbox-margin"> <input type="checkbox" value={this.props.languages[key].language_name} checked={this.props.languages[key].checked} onChange={this.handleLangClick} /> {this.props.languages[key].language_name} </label> } )El console.log enumera bien cada cadena de idioma, las imprimo todas en la consola, pero no se genera nada en la interfaz de usuario. ¿Alguna idea de por qué?
¡Gracias!
Intente usar la función de map para iterar a través de la matriz:
{this.props.languages ? this.props.languages.map(language => { return ( <label id="checkbox-margin" key={language.lang_num}> <input type="checkbox" value={language.language_name} checked={language.checked} onChange={this.handleLangClick} /> {language.language_name} </label> )}) : 'Loading languages...' }