Javascript ReactJs循环内的数据为空 {shopeeship.map（函数（键，值）{ 如果（键已启用）{ 控制台日志（“是”）； }})}

我有一些数据，希望通过循环来呈现一些UI。在上面的代码中，我尝试循环数据，并检查是否启用了键，然后返回html值。它在

控制台日志

中成功打印

yes

，但html未按预期呈现。以前有人遇到过这样的问题吗？请帮忙

这是因为您忘记从循环返回html

这样做

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

{shopeeship.map（函数（键，值）{
如果（键已启用）{
控制台日志（“是”）；
返回(
)
}})}

使用三元条件和箭头函数尝试此简化解决方案

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

{shopeeship.map（（key，value）=>key.enabled？
：null）}

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

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

{shopeeship.map（（键，值）=>key.enabled&&
(
)
)}

---

希望对您有所帮助。

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

您正在映射数组并创建html，要呈现该html，您需要从

map

函数返回它。@catch me试试这个简化的解决方案。我希望它能帮助你，但会有“react.development.js:172警告：列表中的每个孩子都应该有一个唯一的“key”道具。”@catchme当然。您需要传递一个唯一的道具作为map函数的第一个div的键。正在映射的数组是否具有唯一值？如果是，则传递该属性，或者传递索引，这被认为是不理想的，因为它可以工作，但会出现“react.development.js:172警告：列表中的每个子级都应该有一个唯一的“key”属性@catchme检查它现在将在没有警告的情况下工作，如果您有任何问题，请告诉我。@catchme如果对您有帮助，请投票/接受。

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