React中map函数双参数疑问：未使用的n参数为何不可省略？

嘿，这个问题本质是JavaScript Array.map() 方法的回调参数顺序在搞事情，我给你拆解明白：

首先得回忆一下map()的回调函数参数规则：它的第一个参数是遍历到的当前数组元素，第二个参数才是当前元素的索引i。

你原来的代码里写的是：

createArray(totalStars).map((n, i) => (
  <Star key={i} selected={selectedStars > i} onSelect={() => setSelectedStars(i + 1)} />
))

这里的n是当前数组元素（你没用到它），i才是正确的索引值——而你的评分逻辑完全依赖这个i：比如selectedStars > i用来判断星星是否选中，i + 1用来设置选中的星星数量。

当你把n移除后，回调变成了(i) => ...——这时候这个i已经不是索引了！它变成了map()遍历到的当前数组元素。

举个实际的例子：假设createArray(5)生成的是一个长度为5的数组（比如[undefined, undefined, undefined, undefined, undefined]或者[1,2,3,4,5]），移除n后：

• 如果数组元素是undefined，那i + 1就等于undefined + 1，结果就是NaN，这就是你看到“NaN out of 5 stars”的原因；
• 如果数组元素是数字，那i会变成1、2、3、4、5，这时候setSelectedStars(i)虽然不会NaN，但你的选中判断逻辑selectedStars > i就完全乱了，因为索引本来应该从0开始。

解决办法 #

有两个更规范的写法：

1. 用下划线_代替n，明确表示这个参数是故意忽略的（社区通用写法）：

createArray(totalStars).map((_, i) => (
  <Star key={i} selected={selectedStars > i} onSelect={() => setSelectedStars(i + 1)} />
))

2. 如果你知道createArray返回的数组元素就是从1到totalStars的数字，也可以直接用元素值代替i+1，但要注意索引逻辑：

createArray(totalStars).map((starNum, i) => (
  <Star key={i} selected={selectedStars > i} onSelect={() => setSelectedStars(starNum)} />
))

核心就是别搞混map()回调的参数顺序，第一个永远是元素，第二个才是索引～

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