<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.

0
catch me 31 oct. 2019 a las 06:37

4 respuestas

La mejor respuesta

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>
1
Atin Singh 31 oct. 2019 a las 03:41

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

0
ibtsam 31 oct. 2019 a las 04:22

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>
0
Vahid Akhtar 31 oct. 2019 a las 05:56

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.

0
Aashish Karki 31 oct. 2019 a las 05:31