地图没有呈现内容

<div> 
    {!props.isLoading && <div> 

     {normalizedData.map((outerObj,index) => { 

      { 
       <p className="space_name"> 
        {outerObj.space_name} 
       </p> 
      } 

      return(outerObj.applicants.map((obj,i) => { 
       return (
        <div> 
         <div> 
          {renderDetail(obj)} 
         </div> 
        </div> 
       ) 
      })) 
     })} 
    </div>} 
</div>

出于某种原因，我不得不使用{}和return，因为我想做一些数据操纵map，但不知何故，我没有看到我的space_name得到了呈现，但renderDetail是罚款。地图没有呈现内容

来源

2017-06-09 Alan Jenshen

变化：

我们不能返回一个以上的元素，以便包1的地图内的所有元素在div。

2.在1st map内部使用return。

3.包装纸内{}一个p标签（任何HTML元素）不是必需的。

写这样的：

<div> 
    {!props.isLoading && <div> 
     {normalizedData.map((outerObj,index) => { 
      return (
       <div> 
        <p className="space_name"> 
         {outerObj.space_name} 
        </p> 
        { 
         outerObj.applicants.map((obj,i) => { 
          return (
           <div> 
            <div> 
             {renderDetail(obj)} 
            </div> 
           </div> 
          ) 
        })} 
       </div> 
      )} 
     )} 
    </div> 
    } 
</div>

来源

2017-06-09 11:58:52

我用你的代码，它的工作，但现在我的renderDetail不呈现 –

renderDetails是一个函数，你在哪里定义该函数，在外部渲染？你能证明这个函数你从中返回的是什么？ –

你在你的代码中添加了一个返回值？现在它工作了！ –

当您需要在地图中返回多个元素时，您需要在return语句中将所有元素包装在单个div中。因此，将P标签更改为返回div。

<div> 
    {!props.isLoading && <div> 

    {normalizedData.map((outerObj,index) => { 
     return(
      <div> 
       <p className="space_name"> 
        {outerObj.space_name} 
        </p> 

        {outerObj.applicants.map((obj,i) => { 
         return (
          <div> 
           <div> 
            {renderDetail(obj)} 
           </div> 
          </div>) 
        })} 
      </div> 
    })} 
    </div>} 
</div>

来源

2017-06-09 11:57:57 jrenk

这种说法是不正确的：**，你不能在没有返回的情况下在.map（）中呈现HTML **我们可以不使用'return'来渲染，像这样：'

{[1,2,3,4].map(el =>

{el}

)}

'，当我们将'map'主体封装在'{}'中时需要返回，那么我们需要'返回'体内的东西，否则'返回'是不需要的。 –

编辑它。谢谢！ – jrenk

问题是你如何使用箭头功能的方式。当你用{}包装它时，你需要返回一些东西。然而，当你与()包裹JSX它会直接返回内容对象，例如：

const fn1 =() => { 
    return { num: 1 } 
} 

const fn2 =() => ({ 
    num: 2 
}) 

fn1(); // { num: 1 } 
fn2(); // { num: 2 }

因此你可以重写你的代码是这样的：

<div> 
    {!props.isLoading && 
    <div> 
     {normalizedData.map((outerObj,index) => (
     <div> 
      <p className="space_name"> 
      {outerObj.space_name} 
      </p> 
      {outerObj.applicants.map((obj,i) => (
      <div> 
       <div> 
       {renderDetail(obj)} 
       </div> 
      </div> 
     ))} 
     </div> 
    ))} 
    </div> 
    } 
</div>

来源

2017-06-09 12:01:02 madox2

我不能这样做，我不得不使用return。正如我所说的，我需要操纵数据。 –

地图没有呈现内容

回答

相关问题