地圖沒有呈現內容

<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。正如我所說的，我需要操縱數據。 –

地圖沒有呈現內容

回答

相關問題