Javascript 将表的行映射到对象的值而不重复

我有一个由两个对象组成的数据数组。我需要遍历数据数组，并将同一个键的值放在同一行上。例如，所有键='a'都需要在同一行上，但在不同的列上。我如何做到这一点而不重复我在下面的例子中所做的

这是我的数据结构

const data = [{a:1. b:2, c:3, d:3},{a:2, b:5, c:1, d:5}] 
<table className="table study">
        <tbody>
          <tr>
            <th></th>
            {data.map((item, key) =>  <th key={key}>{item.a}
            </th>
            )}
          </tr>  
          <tr>
            <td>Title A</td>
            {data.map((item, key) => (
              <td key={key}>{item.a}</td>
            ))}
          </tr>
          <tr>
            <td>Title B</td>
            {data.map((item, key) => (
              <td key={key}>{item.b}</td>
            ))}
          </tr>
          <tr>
            <td>Title C</td>
            {data.map((item, key) =>  <td key={key}>{item.c}
            </td>)}
          </tr>

        </tbody>
      </table>

const data=[{a:1.b:2，c:3，d:3}，{a:2，b:5，c:1，d:5}]
{data.map（（项，键）=>{item.a}
)}
标题A
{data.map（（项，键）=>(
{item.a}
))}
标题B
{data.map（（项，键）=>(
{item.b}
))}
标题C
{data.map（（项，键）=>{item.c}
)}

我相信你想要的是这样的东西：

const data = [{ a: 1, b: 2, c: 3, d: 3 }, { a: 2, b: 5, c: 1, d: 5 }];
<table className="table study">
  <tbody>
    <tr>
      <th />
      {data.map((item, key) => <th key={key}>{item.a}</th>)}
    </tr>
    {Object.keys(data[0]).map(key => {
      return (
        <tr>
          <td>Title {key.toUpperCase()}</td>
          {data.map((item, idx) => <td key={key+idx}>{item[key]}</td>)}
        </tr>
      );
    })}
  </tbody>
</table>

const data=[{a:1，b:2，c:3，d:3}，{a:2，b:5，c:1，d:5}]；
{data.map（（项，键）=>{item.a}）
{Object.keys（数据[0]）.map（key=>{
返回(
标题{key.toUpperCase（）}
{data.map（（item，idx）=>{item[key]}）}
);
})}

---

注意：这不会使关键点唯一，这是一个问题，因为React期望唯一的关键点，因为它的扩散算法能够最佳地工作。

您可以在使用数据之前将其展平

我发现当遇到这样的问题时，将数据修改成可用的形状更容易

//可以跨对象使用不同的键（如果需要）
常量原始数据=[
{a:1，b:2，c:3，d:3}，
{a:2，b:5，c:1，d:5}，
{e:2，f:5，c:1，d:5}，
{b:5，c:1，e:5}，
];
//展平到{key:[…values]}
常量展平数据=原始数据。减少（（acc，curr）=>{
for（当前的常量键）{
如果（！curr.hasOwnProperty（键））{
继续；
}
如果（！acc[键]）{
acc[键]=[]；
}
acc[键]。按（当前[键]）；
}
返回acc；
}, {});
常量表=（{data}）=>(
{Object.keys（data.map）（rowKey=>(
标题{rowKey.toUpperCase（）}
{data[rowKey].map（（项，单元键）=>(
{item}
))}
))}
);
ReactDOM.render（，document.getElementById（'root'））

除了您指出的关键问题之外，这是一个非常好的解决方案！但是我认为它假设所有的物体都是一个独特的形状，对吗？@devserkan你说得对。考虑到问题是如何设置的，OP似乎是这样假设的。但是，如果该键不存在于数组中包含的某个对象中，它将简单地返回undefined，结果将是表中的一个空单元格。但是，这是假设数组中的第一个对象包含所有可能的键，因此应该实现一些逻辑来获取所有唯一的键。是的，这就是OP现在需要的并解决了问题。是的，数组中的第一个对象将包含所有可能的键，因此这确实解决了问题。很遗憾，密钥验证会导致错误，因为它是如此优雅的解决方案@marcuspetty如果键和值的组合总是唯一的，那么key={key+item[key]}将起作用（不过不要在
部分中更改它，因为它们现在是唯一的）。这样行吗？或者这些可能不是独一无二的吗？