Полученные данные из внешнего API, как пройти через массив и отображать значения

Question

"Я позвонил в externalapi с использованием реактивного редукса, и хранилище загружено данными из API. Но когда я пытаюсь использовать функцию карты, отображается сообщение« Не удается прочитать свойство «карта» из неопределенного »

»

     {this.props.carDetails.array.map(([key,value])=>[key,value])}

carDetails is loaded with following dat

    open_cars: Array(2)
    0: {carid: 1, title: “bmw”} 1: {carid:2,title:”audi”}"


Here is my class
import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { fetchVehicleDetails } from '../actions'
import Post from '../components/Post/Post.js'
class FetchRandomUser extends Component {
  componentDidMount() {
    this.props.fetchVehicleDetails()
  }
  render() {
    return (
      <div>
        {this.props.carDetails.array.map(([key, value]) => [key, value])}
      </div>
    )
  }
}
FetchRandomUser.propTypes = {
  // carDetails:PropTypes.object,
  fetchVehicleDetails: PropTypes.func
}
function mapStateToProps(state) {
  return {
    carDetails: state.carDetails
  }
}
function loadData(store) {
  return store.dispatch(fetchVehicleDetails())
}
export default {
  loadData,
  component: connect(mapStateToProps, { fetchVehicleDetails })((FetchRandomUser))
}

Answer 1

Отсюда я могу догадаться, что вы не отображаете массив. Измените карту на

{this.props.carDetails.open_cars.map((value)=>value)}

Учитывая, что у вас есть массив в open_cars. Если это объект, вы можете использовать Object.keys (yourObject) .map () для зацикливания свойств в объекте.

Answer 2

Вы читаете "this.props.carDetails.array", где в ответе у вас есть "open_cars: Array (2)". Но вы обращаетесь к «this.props.carDetails.array.map», где «массив» не находится в реальном ответе.

Так что попробуйте так.

    <div>
        {this.props.carDetails && this.props.carDetails.open_cars ?
this.props.carDetails.open_cars.map(([key, value]) => [key, value])
:'' }
      </div>

Answer 3

Потому что когда вы выбираете данные с сервера API, это async . Когда ваш Компонент рендерит в первый раз, carDetails еще не обновлено . При следующем рендеринге компонента (во второй раз) будет обновлено carDetails .

Итак, в вашем компоненте проверьте так:

class FetchRandomUser extends Component {
  componentDidMount() {
    this.props.fetchVehicleDetails()
  }
  render() {
    const { carDetails } = this.props;
    return (
      <div>
        {
           // The data: `open_cars: Array(2) 0: {carid: 1, title: “bmw”} 1: {carid:2,title:”audi”}"`
           // So you must access to `open_cars` not `array` here
           carDetails && carDetails.open_cars && carDetails.open_cars.length && 
           carDetails.open_cars.map(([key,value])=>[key,value])
        }
      </div>
    )
  }
}