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

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)