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

我有一些数据并想循环通过它来呈现一些 UI。在上面的代码中，我尝试循环数据并检查是否启用了键，然后回显 html 值。它成功打印yes，console log但 html 未按预期呈现。有人遇到过这样的问题吗？请帮忙。

4

4 回答 4

1

这是因为你忘记从循环中返回你的 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>
于 2019-10-31T03:41:27.413 回答
0

您不是从地图返回，您可以使用箭头函数代替隐式返回

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

希望能帮助到你

于 2019-10-31T04:22:00.813 回答
0

您需要返回 html 部分，map 创建一个新数组并期望返回值，否则您的数组将填充空值，因此您需要返回所述 html 部分。

于 2019-10-31T05:31:26.113 回答
0

试试这个使用三元条件和箭头函数的简化解决方案。

<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>
于 2019-10-31T04:01:56.313 回答