React迭代中无法将索引编号渲染至HTML的问题排查

嘿，我一眼就看出问题所在啦！你想用key属性来展示列表编号，但React的key是专门给内部diff算法用的特殊属性，它不会被当作普通props传递给子组件——这就是为什么你在浏览器调试工具里能看到key，但页面上就是不显示的原因。

给你两个简单的解决方案：

方案1：单独传递编号props #

在父组件Main的map循环里，把index（或者index+1，如果想要从1开始的编号）作为一个单独的props传给RenderTable，比如叫itemNumber：

{Car2go.placemarks.map((content, index) => {
  // 用index+1让编号从1开始，要是想从0开始就直接传index
  return <RenderTable content={content} key={index} itemNumber={index + 1} />;
})}

然后在RenderTable组件里，接收这个新的props并渲染：

import React, { Component } from "react";
export class RenderTable extends Component {
  render() {
    // 现在可以拿到itemNumber了
    const { content, itemNumber } = this.props;
    return (
      <div>
        <p>
          <span>{itemNumber}</span> {content.address}
        </p>
      </div>
    );
  }
}
export default RenderTable;

额外小提示（最佳实践） #

虽然用index当key在静态列表里没问题，但如果你的列表之后会有增删、排序操作，最好用每个列表项的唯一标识（比如content.id，如果数据里有的话）作为key，这样React能更高效地更新DOM，避免出现奇怪的渲染bug~

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