React中如何用.map获取数组对象序号并在JSX中展示

你之前的写法存在两个核心问题：

1. currentNumber是常量，每次map循环时它的值始终为0，无法实现自增效果
2. 即使尝试修改currentNumber，React组件渲染时会重新执行整个函数，变量会被重置，这种方式根本无法生成正确序号

正确做法：利用map的索引参数 #

Array.map()方法自带第二个参数index，表示当前元素在数组中的位置（从0开始），只需给它加1就能得到从1开始的自然序号。修改后的代码如下：

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((item, index) => {
          // 索引从0开始，加1得到从1起始的序号
          const serialNumber = index + 1;
          return (
            <tr key={index}>
              <td>{serialNumber}</td>
              <td>{item.isSold ? "Sold" : "Available"}</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

export default Table;

额外注意事项 #

• 必须给tr元素添加key属性，React要求列表元素有唯一标识；如果你的数据里有业务唯一ID（比如id: 1），优先用真实ID作为key，避免列表更新时出现渲染异常
• 不要用key值作为展示的序号，key仅作为React内部标识，不能用作业务渲染内容

内容的提问来源于stack exchange，提问作者Martin Arreola