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>
                            );
                        }))

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

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)

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

2 个答案: