javascript - 为什么当我将 tr 标签移动到深层时反应行为很奇怪？

Question

我正在尝试构建一个表，它将以下数据呈现到它们各自的列中，但是我想在其中添加一个 id 键key，但此刻添加键数据消失了，我错过了什么？

const arr = [
  {
    demo: [
      {
        _id: "xx122",
        name: "Historian",
        tags: ["demo"],
        things: [],
        list: [],
        queries: [],
        notes: []
      }
    ],
    demo_2: [
      {
        _id: "xx123",
        name: "Demo",
        tags: ["demo_2"],
        things: [],
        list: [],
        queries: [],
        notes: []
      }
    ]
  }
];
const keys = Object.keys(arr[0]);

export default function Demo() {
  return (
      <div>
          <table className="table">
              <thead>
                  <tr>
                      {keys.map((i) => (
                          <th key={i}>{i}</th>
                      ))}
                  </tr>
              </thead>
              <tbody>
              {keys.map(key => 
                {arr[0][key].map(item => <tr key={item._id}><td>{item._id}</td></tr>)}
              )}
              </tbody>
          </table>
      </div>
  );
}

这有效，但我需要添加item._id}到tr标签

              <tbody>
              {keys.map(key => 
                              <tr>
                {arr[0][key].map(item => <td>{item.technique_id}</td>)}
                </tr>
              )}
              </tbody>

标签： javascriptreactjs

Answer 1

我真的不明白为什么要使用如此复杂的数据结构。但这很有趣。这是我解决它的方法。

我们需要 tr 和 tds 中的键，因为它们都是动态渲染的。

{keys.map((key) => {
            let row = arr[0][key];
            let items = Object.keys(row[0]);
            return (
              <tr key={row[0]._id}>
                {items.map((item, i) => (
                  <td key={i}>{row[0][item]}</td>
                ))}
              </tr>
            );
          })}

你可以参考这个例子。 https://codesandbox.io/s/pedantic-goldwasser-hthdz?file=/src/App.js:0-1097