Question

我有一个由两个对象组成的数据数组。我需要遍历数据数组并将相同键的值放在同一行上。例如，所有键的='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>

Answer 1

我相信您需要遵循以下原则：

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>

注意：这不会使密钥唯一，这是一个问题，因为React希望唯一的密钥才能使它的扩散算法发挥最佳作用。

Answer 2

您可以先整理数据，再使用它。

遇到类似问题时，我发现将数据修改为可用形状更容易。

// Can have different keys across objects (if you want)
const rawData = [
  { 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 },
];

// Flattens to { key: [...values] }
const flattenedData = rawData.reduce((acc, curr) => {
  for (const key in curr) {
    if (!curr.hasOwnProperty(key)) {
      continue;
    }

    if (!acc[key]) {
      acc[key] = [];
    }

    acc[key].push(curr[key]);
  }

  return acc;
}, {});

const Table = ({ data }) => (
  <table className="table study">
    <tbody>
      {Object.keys(data).map(rowKey => (
        <tr key={rowKey}>
          <th>Title {rowKey.toUpperCase()}</th>
          {data[rowKey].map((item, cellKey) => (
            <td key={cellKey}>{item}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

ReactDOM.render(<Table data={flattenedData} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

将表的行映射到对象的值，而无需重复自己

2 个答案: