从外部 api 获取数据，如何遍历数组并显示值

Question

“我使用 react redux 调用了 externalapi，并且 store 加载了来自 API 的数据。但是当我尝试使用 map 函数时，会显示“无法读取未定义的属性 'map'”错误

     {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：数组（2）”。 但是您正在访问“this.props.carDetails.array.map”，其中“array”不在实际响应中。

所以试试这样吧。

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

Answer 3

因为当您从 API 服务器获取数据时，这是一个异步。当您的组件第一次渲染时，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>
    )
  }
}