循环内的 ReactJs 数据为空

Question

<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 值。它在 console log 中成功打印了 yes，但 html 未按预期呈现。以前有人遇到过这样的问题吗？请帮忙。

Answer 1

这是因为您忘记了 return 您的 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>

Answer 2

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

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

Answer 3

您不是从地图 returning，您可以使用箭头函数代替隐式 return as

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

希望对您有所帮助

Answer 4

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

循环内的 ReactJs 数据为空

ReactJs data inside loop empty

javascript

reactjs

ant-design-pro