<div className="col-md-12">
<div className="row">
{shopeeship.map(function (key,value) {
if(key.enabled){
console.log("yes");
<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
}})}
</div>
</div>
Tengo algunos datos y quiero recorrerlos para representar alguna interfaz de usuario. En el código anterior, traté de hacer un bucle de datos y verifiqué que si la clave estaba habilitada, se haría eco del valor html. Imprime con éxito yes en console log pero el html no se procesa como se esperaba. ¿Alguien ha enfrentado tal problema antes? Por favor ayuda.
4 respuestas
Es porque olvidó devolver su html del bucle
Haga esto
<div className="col-md-12">
<div className="row">
{shopeeship.map(function (key,value) {
if(key.enabled){
console.log("yes");
return(
<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
)
}})}
</div>
</div>
No está regresando del mapa, puede usar la función de flecha en su lugar para el retorno implícito como
<div className="col-md-12">
<div className="row">
{shopeeship.map((key,value) => key.enabled &&
(<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>)
)}
</div>
</div>
Espero que ayude
Pruebe esta solución simplificada usando la condición ternaria y la función de flecha.
<div className="col-md-12">
<div className="row">
{shopeeship.map((key,value)=> key.enabled ?
<div className="col-md-6" key={value}>
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
:null)}
</div>
</div>
Necesita devolver la parte html, map crea una nueva matriz y espera un valor de retorno; de lo contrario, su matriz se llenará con valores nulos, por lo tanto, deberá devolver dicha parte html.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas relacionadas con la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excluyendo ActionScript). Esta etiqueta rara vez se usa sola, pero a menudo se asocia con las etiquetas [node.js], [json] y [html].