JavaScript中map函数index参数无法递增问题排查求助

问题根源 #

你在给asteroids状态赋值时额外嵌套了一层数组，导致遍历的数据源实际长度为1，所以index永远固定为0：

• 你已经通过ast.push(...arr)把所有小行星数据合并成了长度为20的一维对象数组ast
• 但this.setState({asteroids:[ast]})的写法又给ast套了一层数组，最终this.state.asteroids是长度为1的二维数组，第一层唯一的元素才是你要遍历的20条数据
• 手动指定索引能正常取值，是因为你取的是二维数组第一项（即完整的20条数据数组）对应下标的内容，和遍历逻辑无关，不需要额外加嵌套逻辑。

修改方案 #

1. 修改componentDidMount中的赋值逻辑，去掉额外的数组包裹：

componentDidMount(){
  fetch(`https://api.nasa.gov/neo/rest/v1/feed?start_date=${this.state.time[0]}&end_date=${this.state.time[1]}&api_key=ipAxYzaENbqRKb7GgzFPcH6QUBsHXY3QKB7uXOf5`)
  .then(response => response.json())
  .then((data) => {
    let ast = []
    Object.values(data.near_earth_objects).forEach((arr)=>{
      ast.push(...arr)
    })
    // 移除多余的[]包裹
    this.setState({asteroids: ast})
  });
}

2. 修改render中的遍历逻辑，直接取遍历到的小行星对象属性即可：

render() {
  return (
    <div>
      <h4>Near earth objects</h4>
      <table>
        <tbody>
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th>Magnitude</th>
          <th>Hazardous</th>
          <th>Sentry Object</th>
        </tr>
        { 
          this.state.asteroids.map((item, index)=>(
            <tr key={item.id}>
              <td >{item.name}</td>
              <td >{item.id}</td>
              <td >{item.absolute_magnitude_h}</td>
              <td >{item.is_potentially_hazardous_asteroid ? "true": "false"}</td>
              <td >{item.is_sentry_object ? "true": "false"}</td>
              <td > index {index}</td>
            </tr> 
          ))  
        }
        </tbody>
      </table>
    </div>
  )
}

修改后index就会正常从0递增到19。

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