如何有条件地在映射数组中渲染映射对象答案

【问题标题】：How conditionally render mapped object in mapped array如何有条件地在映射数组中渲染映射对象
【发布时间】：2017-02-15 16:48:56
【问题描述】：

我的组件中有两个不同的数据，有时传入一个对象数组，有时只是一个对象。我的目标是遍历每个对象并吐出一些 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>
                            );
                        }))

您可以看到我正在检查传入的数据是否是一个数组，如果不是，则只循环一个常规对象。该部分工作正常，但如果数据是数组，则不会显示任何内容。我的代码反应不呈现任何东西或抛出任何错误消息有什么问题？

【问题讨论】：

标签： javascript reactjs

【解决方案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>
            );
        })

为元素分配唯一键，否则会收到警告。

【讨论】：

嗯，这让我觉得自己很笨哈哈。非常感谢你！我将标记为答案:)
有时会发生小错误:)

【解决方案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)

【讨论】：