Данные ReactJs внутри цикла пустые - PullRequest
Новая
       6

Данные ReactJs внутри цикла пустые

0 голосов
/ 31 октября 2019 
<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>

У меня есть некоторые данные, и я хочу просмотреть их, чтобы отобразить некоторый пользовательский интерфейс. В приведенном выше коде я попытался зациклить данные и проверил, что если ключ включен, то выводит значение html. Он успешно печатает yes в console log, но HTML не отображается должным образом. Кто-нибудь сталкивался с такой проблемой раньше? Пожалуйста помоги.

Ответы [ 4 ]

1 голос
/ 31 октября 2019

Это потому, что вы забыли вернуть свой HTML из цикла

Сделайте это 

<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>
0 голосов
/ 31 октября 2019

вам нужно вернуть html-часть, map создает новый массив и ожидает возвращаемого значения, иначе ваш массив будет заполнен нулевыми значениями, следовательно, вам нужно будет вернуть указанную html-часть.

0 голосов
/ 31 октября 2019

Вы не возвращаетесь с карты, вы можете использовать функцию стрелки вместо неявного возврата как 

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

Надеюсь, это поможет

0 голосов
/ 31 октября 2019

Попробуйте это упрощенное решение, используя троичное условие и функцию стрелки. 

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