Question

“我使用react redux调用了externalapi，并且存储区中加载了API的数据。但是当我尝试使用地图功能时，显示”无法读取未定义的属性'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

因为当您从API服务器获取数据时，这是异步。首次渲染组件时，carDetails 尚未更新 。在第二次渲染Component时，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>
    )
  }
}

Answer 2

我可以从这里猜测的是您没有在数组上进行映射将地图更改为

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

考虑到您在open_cars中确实有一个数组。如果这是一个对象，则可以使用Object.keys（yourObject）.map（）遍历对象中的属性。

Answer 3

您正在阅读“ this.props.carDetails.array”，其中在响应中您会看到“ open_cars：Array（2）”。但是您正在访问“ this.props.carDetails.array.map”，而“ array”不在实际响应中。

所以尝试这样。

public function myAlerts($page = null){
    $userid = 5;

    $users =  \App\Log::with('user')->wherehas(['user'=>function($q) use($userid) {
        $q->where('id',$userid);
    }])->get();
}

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

3 个答案: