有條件地渲染映射數組中的映射對象

Question

我有兩個不同的數據片段進入我的組件，有時會傳入一個對象數組，有時候只是一個對象。我的目標是遍歷每個對象並吐出一些JSX。這裏是我的代碼：

   (Array.isArray(tableData)) 
        ? 
         (tableData.map(obj => { 
          (Object.keys(obj).map(key => { 
           return (
            <tr> 
             <td>{key}</td> 
             <td>{obj[key]}</td> 
            </tr> 
           ); 
          })) 
         })) 
        : 
         (Object.keys(tableData).map(key => { 
          return (
           <tr key={key}> 
            <td>{key}</td> 
            <td>{tableData[key]}</td> 
           </tr> 
          ); 
         })) 

你可以看到即時檢查，看看如果數據進來是一個數組，如果沒有通過循環只是一個普通的對象。該部分工作正常，但如果數據是一個數組，則不會顯示任何內容。我的代碼有什麼問題反應不會呈現任何內容或拋出任何錯誤消息？

Answer 1

因爲你忘了在這條線使用return：

(Object.keys(obj).map，試試這個：

Array.isArray(tableData)) 
    ? 
     tableData.map(obj => { 
      return Object.keys(obj).map(key => { 
       return (
        <tr> 
         <td>{key}</td> 
         <td>{obj[key]}</td> 
        </tr> 
       ); 
      }) 
     }) 
    : 
     Object.keys(tableData).map(key => { 
      return (
       <tr key={key}> 
        <td>{key}</td> 
        <td>{tableData[key]}</td> 
       </tr> 
      ); 
     }) 

指定的唯一關鍵因素，否則，你會得到一個警告。

Answer 2

Mayank的答案解決了這個問題，但它有點冗長。回想一下，如果你想返回一個表達式的結果（如函數調用或JSX元素的結果）從箭頭的功能，你可以不使用大括號和return：

Array.isArray(tableData) 
    ? tableData.map(obj => 
     Object.keys(obj).map(key => (
     <tr> 
      <td>{key}</td> 
      <td>{obj[key]}</td> 
     </tr> 
    ) 
    )) 
    : Object.keys(tableData).map(key => (
     <tr key={key}> 
     <td>{key}</td> 
     <td>{tableData[key]}</td> 
     </tr> 
    )) 

我爲了清楚起見，上面使用了括號。

但是，你在這裏重複相同的代碼兩次，所以爲了簡單和可讀性，我建議它提取到自己的函數：

const tableRows = obj => 
    Object.keys(obj).map(key => (
    <tr> 
     <td>{key}</td> 
     <td>{obj[key]}</td> 
    </tr> 
) 
); 

// ... 

Array.isArray(tableData) ? tableData.map(tableRows) : tableRows(tableData)