如何获取数组中每个 object 的编号 using.map | 反应

Question

我试图获取数组中每个 object 的编号，然后我试图将它添加到我的 jsx 代码中以显示它是什么

我正在从这个文件 tableData.js 中提取数据

export const data = [
  {price: 1500, isSold: false}
  {price: 1800, isSold: false}
  {price: 1650, isSold: true}
]

表.js

import React from "react";

import {data} from "./tableData.js";

function Table() {
  return (
    <table>
      <thead>
        <tr>
          <td>Number</td>
          <td>Status</td>
        </tr>
      </thead>
      <tbody>
        {data.map((data, key) => {
          return (
            <tr>
              <td>{/* I NEED TO ADD THE NUMBER HERE */}</td>
              <td>{data.isSold ? "Sold" : "Available"}</td>
            </tr>
          )
        }
      </tbody>
    </table>
  )
}

我尝试添加一个从 0 开始并在每次添加行时添加 1 的变量，但它不起作用（我是初学者所以我的策略可能很糟糕）

import React from "react";

import {data} from "./tableData.js";

function Table() {
  const currentNumber = 0; // Added this

  return (
    <table>
      <thead>
        <tr>
          <td>Number</td>
          <td>Status</td>
        </tr>
      </thead>
      <tbody>
        {data.map((data, key) => {
          const setNumber = currentNumber + 1; // Added this

          return (
            <tr>
              <td>{currentNumber}</td> // Added this
              <td>{data.isSold ? "Sold" : "Available"}</td>
            </tr>
          )
        }
      </tbody>
    </table>
  )
}

Answer 1

您可以使用map function 的第二个参数获取数组项的当前索引：

<tbody>
    {data.map((data, key) => {
      return (
        <tr key={key}> {/* <= Prevent the error: Each child need its own key */}
          <td>{key}</td>
          <td>{data.isSold ? "Sold" : "Available"}</td>
        </tr>
      )
    }
  </tbody>

您可以在此处了解有关 map function 的更多信息： JS Map (MDN)

并且有一个关于为什么你应该使用 key 道具的链接： Understanding the key prop

Answer 2

只是一个提示，它可能已经解决了您的问题，但更好的方法是在每个 object 中保留一个单独的 ID 来识别它们，而不是使用 function 生成的索引或键。

Bcz 这些键是由 Js 为特定的数组实例生成的，而不是为您的数据生成的。

假设您从映射列表中删除了一些内容，那么您的新索引将是oldIndex-1 ，但在您的数据集中它将是 oldIndex。 所以它会造成额外的混乱并导致数据损坏。

只需在您的数据 arr 中添加一个 Id -

export const data = [
  {id:001, price: 1500, isSold: false}
  {id:101, price: 1800, isSold: false}
  {id:203, price: 1650, isSold: true}
]

现在将它们用作

<tbody>
    {data.map((data, key) => {
      return (
        <tr key={key}> {/* <= Prevent the error: Each child need its own key */}
          <td>{data.id}</td>
          <td>{data.isSold ? "Sold" : "Available"}</td>
        </tr>
      )
    }
  </tbody>

现在，即使您更改订单，您的数据价格也将始终参考该特定数据 ID。

Answer 3

map的第二个参数是实际索引。

 const data = [ { price: 1500, isSold: false}, { price: 1800, isSold: false}, { price: 1650, isSold: true} ] console.log(data.map((item, i) => `Num: ${i}, Price: ${item.price}, Sold: ${item.isSold}`))

Answer 4

我修好了，把这个加进去

<td>{key + 1}</td>