如何在 JS 中获取数组而不是 object 的数据？

Question

所以我不是 100% 确定这是问题所在，但我使用 fetch 方法从这个链接https://swapi.py4e.com/api/people获取数据。 然后我尝试在上面使用.map function 。 我没有工作，而是收到Unhandled Rejection (TypeError): jedis.map is not a function错误。

当我控制台记录jedis时，我得到了您在该链接中看到的所有内容，例如计数：87，下一个：“ https://swapi.py4e.com/api/people/?page=2 ”等。

我假设错误意味着绝地实际上是jedis而不是数组。 但同样，我不完全确定这就是原因。 如果是，我如何访问数据以使jedis是一个数组而不是 object

import React from 'react';
import './App.css';
import CardList from './CardList'

class App extends React.Component{
  constructor() {
    super();
    this.state = {
      jedis: []
    }
  }

  componentDidMount() {
    fetch('https://swapi.py4e.com/api/people').then(resp => resp.json())
    .then(jedi => this.setState({jedis: jedi}));
  }


  render() {
    return (
      <CardList jedis={this.state.jedis}/>

      )
  }

}

export default App;

import React from 'react'
import Card from './Card'

const CardList = ({ jedis }) => {
    return (
        <div>
            {
                //console.log(jedis)
                jedis.map((jedi, i) => {
                    return (
                        <Card
                            key = {i}
                            name = {jedi.name}
                            height = {jedi.height}
                            mass = {jedi.mass}
                        />
                        )

                })

            } 
        </div>

    )   


}


export default CardList;

继承人 API 我正在使用以防万一有人想知道http://swapi.py4e.com/

Answer 1

根据 API 的响应，

将您的CardList组件道具更改为：

<CardList jedis={this.state.jedis.results} />

此外，您需要将 state 初始化更改为：

this.state = {
  jedis: {
    count: 0,
    previous: null,
    next: null,
    results: []
  }
}

Answer 2

假设您想在每次提取时继续添加到数组中，您将需要使用扩展运算符和previousState 。

fetch('https://swapi.py4e.com/api/people').then(resp => resp.json())
.then(jedi => { 

    this.setState((previousState) => {
      return {
        jedis: [...previousState.jedis, jedi.results],
      };
    });

});

Answer 3

这很简单。 实际上，您需要将响应 object 转换为 Array 并且您可以在其上运行map 。 下面是一个示例，假设您将数字作为键，如果您的 obj 响应键不是数字而是常规字符串，您可以在 return 语句中将Number(key)替换为key 。

var obj = { "1": 5, "2": 7, "3": 0, "4": 0}; var result = Object.keys(obj).map(function (key) { return [Number(key), obj[key]]; });