如何将 id 传递给 React Js 中表中的每个 <td>？

如何解决如何将 id 传递给 React Js 中表中的每个 <td>？

大家。我正在尝试将 id 传递给表中的每个 td 以获取通过 API 接收的数据，以便每个表数据单元格都有自己的 id。到目前为止，代码看起来像这样

CodeSandbox

const normalizeData = (data) => {
  var items = Object.values(data)[0];

  var createOrEdit = (acc,key,value) => {
    var findItem = acc.find((r) => r[key] !== undefined);
    if (findItem === undefined) acc.push({ [key]: [value] });
    else findItem[key].push(value);

    return acc;
  };

  var result = items.reduce((acc,curr) => {
    createOrEdit(acc,"Name",curr.name);
    createOrEdit(acc,"Last Name",curr.last_name);
    createOrEdit(acc,"Age",curr.age);
    createOrEdit(acc,"Occupation",curr.Occupation);

    return acc;
  },[]);

  return result;
};

export default function App() {
  const data = {
    people: [
      {
        id: "1",name: "John",last_name: "Doe",age: "25",Occupation: "driver"
      },{
        id: "2",name: "Jack",last_name: "Brown",age: "24",Occupation: "it"
      },{
        id: "3",name: "Oliver",last_name: "Black",age: "30",Occupation: "cto"
      }
    ],format: { last_name: "Last Name" }
  };

  var renderData = (items) =>
    items.map((r) => {
      var key = <td>{Object.keys(r)[0]}</td>;
      var values = Object.values(r)[0].map((v) => <td>{v}</td>);
      return (
        <tr>
          {key}
          {values}
        </tr>
      );
    });
  return (
    <div className="App">
      <table>
        <tbody>{renderData(normalizeData(data))}</tbody>
      </table>
    </div>
  );
}

结果如下：

Name           John   Jack    Oliver
Last Name       Doe   Brown    Black
Age             25     24       30
Occupation      driver  it     cto

我需要将 id 从 API 数据传递给所有具有相同 id 的 td-s，例如：

<td id="1">John </td>  
<td id="1">Doe </td>      
<td id="1">25    <td/>  
<td id="1">driver </td>

<td id="2">Jack </td>
<td id="2">Brown </td>
<td id="2">24 </td>
<td id="2">it </td>

我需要实现这一点，例如，当我选择 id 1 时，将包含所有 id:1 的 td 单元格。

我对 React 和 JavaScript 还很陌生，所以我找不到实现它的方法。非常感谢任何帮助和建议。谢谢。

解决方法

您的代码设置方式是：

var values = Object.values(r)[0].map((v,**idx**) => (
    <td **className={idx}**>{v}</td>
  ));

但我认为您应该在数据中包含索引，而不是依赖数组索引。

,

const [tableData,setTableData] = useState(data);

.....

// any logic that change data
...
setTableData(modifiedData);


....
{renderData(normalizeData(tableData))}

使用react，每当有状态改变时，它会重新渲染，所以每当你修改数据后，setTableData都会设置新的状态和数据到tableData，它会调用{{1 }}再次

编辑：如果你真的想给所有的td一个id，不要使用id，在html中使用data属性，比如{renderData(normalizeData(tableData))}，你可以搜索更多关于数据属性的信息