有条件地渲染映射数组中的映射对象

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)