如何在 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]]; });