Question

我正试图在React中找到嵌套值，但是我收到了错误。

我已经将React组件分成了我想要循环的片段，但我正在考虑尝试遍历对象与数组的问题。

const TableRow = value => (
  <tr>
    <td>${value}</td>
  </tr>
);

const TableBody = ({ day }) => (
  <tbody>
    <tr>
      <td>{day}</td>
    </tr>
    { /* Repeats for each */ }
    {Object.keys(day).map(value => {
      <TableRow
        value={value}
      />
    })}
  </tbody>
);

const Table = ({ year }) => (
  <table>
    <thead>
      <tr>
        <th>{Object.keys(year)}</th>
      </tr>
    </thead>
    { /* Repeats for each day */ }
    {Object.keys(year).map(day => (
      <TableBody
        key={day}
        day={day}
      />
    ))}
  </table>
);

const FullTable = ({ inputData }) => {
  return (
    <div>
    { /* Repeat table for each year */ }
    {inputData.map(year => (
      <Table
        key={year}
        year={year}
      />
      ))
    }
    </div>
  );
};

给出一些样本数据，如：

const inputData = [
  {
    2017: {
      'Jan 1': [123.00, 123.99],
      'Jan 12': [123.98],
      'Feb 1': [123.00, 123.99],
      'Feb 2': [123.00, 123.99],
      'Feb 12': [123.98, 123.22],
    },
  },
  {
    2016: {
      'Jan 1': [123.00, 123.99],
      'Jan 12': [123.98],
      'Feb 1': [123.00, 123.99],
      'Feb 2': [123.00, 123.99],
      'Feb 12': [123.98, 123.22],
    },
  },
];

但是我得到以下错误：对象无效作为React子对象（找到：具有键{...}的对象）

我创建了CodeSandbox here

Answer 1

我使用codeandbox链接中的代码在本地计算机上重新创建了您的场景。

我没有得到你提到的错误，而是我得到了：

flattenChildren（...）：遇到两个孩子用同一把钥匙， `[object Object]

错误信息正是解释了这个问题：两个表组件都有相同的密钥，即＆＃34; object＆＃34;。

你在inputData上调用map，这意味着传递给map函数的参数是＆＃39; year对象＆＃39;而不是年份编号本身（但是你似乎理解这一点，因为你正在传递对象下到表正确）。当这些对象作为组件的一个键传递给值＆＃34; object＆＃34;因此你的钥匙实际上是等同的。

您可以通过从年份对象生成唯一值并将其作为键传递来解决问题，即：

JSON.stringify(year)

这种解决方案不优雅，不安全;如果您拥有与不同年份相对应的完全相同的数据（年份对象），它将无效。

我会考虑重新设计你的数据结构并将年份作为对象的属性，而不是索引（我不是关联数组的忠实粉丝）。因此，您的密钥可能就像＆＃39; yearData.year＆＃39;

使用数组与对象循环React组件

1 个答案: