Реагировать -пропуск через массив объектов

Question

Я получил API от Coinlayer, и данные, которые он возвращает, являются объектом. Я попытался использовать состояние для создания пустого массива, а затем setState для установки там данных, но когда я пытаюсь провести через него l oop с помощью карты, сгенерированная ошибка говорит: «карта не является функцией»

снимок экрана данные из API

вот код

class App extends Component{

  state={names:[] }

 



  componentDidMount(){
    fetch('http://api.coinlayer.com/live?access_key=c8c0ef65a659c37726364c68e6fdb887&expand=1')
    .then((response)=>response.json())
    .then((data)=>{
      console.log(data.rates);
      this.setState({names:data.rates})
      
   
    })
  
  }
  
  
  render(){
    return(
      <div className="Body">
        <div className="Navbar"><h1 style={{textAlign:'center'}}>Crypto Dashboard</h1></div>
       

        

        <DashBoard names={this.state.names}  />
       

      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

приложение экспорта по умолчанию;

Answer 1

Вы пытаетесь работать с объектом, а не с массивом.

Вы можете использовать Object.keys https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

например

    fetch('http://api.coinlayer.com/live?access_key=c8c0ef65a659c37726364c68e6fdb887&expand=1')
    .then((response)=>response.json())
    .then((data)=>{
      let names = [
      Object.keys(data).forEach(key => {
        names.push(data[key]) // Push the values to the array
        names.push(key]) // Or push the key to the array (whatever you need)
      })
      this.setState({ names })
    })

Есть много других способов сделать то же самое.