reactjs 如何使用.map获取数组中每个对象的编号|React

siv3szwd 于 2023-02-04 发布在 React

关注(0)|答案(4)|浏览(188)

我试图获得数组中每个对象的编号，然后我试图将其添加到我的jsx代码中以显示它是哪一个
我正在从文件tableData.js中提取数据

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

Table.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>
  )
}

reactjs

来源：https://stackoverflow.com/questions/75316267/how-do-i-get-the-number-of-each-object-in-a-array-using-map-react

4条答案

按热度按时间

g0czyy6m1#

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

<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功能的更多信息：JSMap（MDN）
这里有一个链接告诉你为什么要使用这个关键 prop ：Understanding the key prop

赞(0）回复(0）举报 2023-02-04

dddzy1tm2#

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}`))

赞(0）回复(0）举报 2023-02-04

juzqafwq3#

我把它修好了加上这个

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

赞(0）回复(0）举报 2023-02-04

tvmytwxo4#

只是一个提示，它可能已经解决了你的问题，但它是一个更好的方法，保持一个单独的id在每个对象来标识他们，而不是使用函数生成的索引或键。
这些键是由Js为数组的特定示例生成的，而不是为数据生成的。
假设你从Map列表中删除了一些东西，那么你的新索引将是oldIndex-1，但在你的数据集中它将是oldIndex，所以这将产生额外的混乱，并导致数据损坏。
只需在您的数据区域中添加一个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。

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs 如何使用.map获取数组中每个对象的编号|React

4条答案

相关问题

热门标签

最新问答