js map函数索引不递增

Question

可能遗漏了一些明显的东西，但我的 map 函数的索引参数不会递增，它只是卡在 0 或我设置的任何静态索引，也许我遗漏了一些东西，因为我传入的数据结构是一个数组像这样的对象：

(20) -> [{},{},{}]

并且每个对象都有相当多的属性我将在下面提供我的地图功能以获得更大的上下文

我也可以手动更改我的索引，我的代码可以很好地抓取我指定的任何索引处的对象，即“5”或“13”，我的深度是正确的，因为它显示属性值应该，想知道我是否需要嵌套一些东西来完成这项工作？

如果我控制台记录我的状态我这里有这个结构只是一个对象数组

//storing to state

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)=>{
            //push the two arrays together
            ast.push(...arr)
        })
        this.setState({asteroids:[ast]})
       
      });
    }





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((arr,index)=>(
                    //for each item (arr) there will be properties
                    
                <tr key={arr.toString()}>
                    <td >{arr[index].name}</td>
                    <td >{arr[index].id}</td>
                    <td >{arr[index].absolute_magnitude_h}</td>
                    <td >{arr[index].is_potentially_hazardous_asteroid==true? "true": "false"}</td>
                    <td >{arr[index].is_sentry_object==true? "true": "false"}</td>
                    <td > index {index}</td>
                </tr> 
                
                ))  
                 
            }
            </tbody>
            </table>
                
            </div>
        )
    }

Answer 1

当您设置小行星的状态并将数组放入另一个数组时，错误出现在 componentDidMount

  this.setState({asteroids:[ast]})
  // instead it should be 
  this.setState({asteroids: ast })

使用代码的工作示例检查此代码框 https://codesandbox.io/s/empty-forest-jvwin?file=/src/App.tsx

至于索引卡住的原因，是因为你例子中的asteroids数组只有1个元素（保存所有asteroids数据的数组）。

js map函数索引不递增

js map function index does not increment

mapping

javascript-objects

reactjs