在 React Child 中访问 Props 以映射数组？答案

【问题标题】：Accessing Props to Map over Array in React Child?在 React Child 中访问 Props 以映射数组？
【发布时间】：2019-11-01 14:46:39
【问题描述】：

一直在使用 react 并仍在尝试掌握所有概念。可以使用帮助来了解我如何使它工作。我想将一个数组作为道具传递给另一个反应组件以进行映射。有人可以指出我在这里做错了什么吗？我可以将数组作为函数映射，但不能在渲染内部：

App.js

import React, { Component } from 'react';
import Leaf from './components/Leaf';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        height: "100vh",
        width: "100vw",
        latitude: 40.7128,
        longitude: -74.0060,
        zoom: 10
      },
      latitude: 40.7128,
      longitude: -74.0060,
      zoom: 10,
      stations: [],
      selectedStation: null,
      userLocation: {}
    };
  }

  componentDidMount() {
    fetch('https://gbfs.citibikenyc.com/gbfs/en/station_information.json')
    .then(res => res.json())
    .then(res=>
      this.setState({stations: res}))
  }

  checkData=()=>{
    console.log(this.state.stations)
    this.state.stations.data.stations.map(e=>{
      console.log(e)
    })
  }

  render() {

    return (
      <div>
          <button onClick={this.checkData}>click me</button>   
          <Leaf 
            viewport={this.state.viewport}
            stations={this.state.stations}/>
      </div>
    );
  }
}

export default App;

leaf.js

import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { Button } from 'react-bootstrap';

class leaf extends Component {

    checkData=()=>{
        this.props.stations.data.stations.map(e=>{
          console.log(e)
        })
      }



    render() {

        const markers = this.props.stations.data.stations.map((station) =>
        <Marker 
          position={[station.lat, station.lon]}
          onClick={this.markerClick.bind(this,station)}>
          <Popup>
          </Popup>
        </Marker>
              );


        const position = [this.props.viewport.latitude, this.props.viewport.longitude]
        //const position = [40.7484, -73.9857]
        return (
            <div>
                <button onClick={this.checkData}>check props</button>
                <Map center={position} zoom={14}>
                    <TileLayer
                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    {markers}
                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>  
            </div>
        );
    }
}

export default leaf;

过去我做过类似的事情：

const Search = ( props ) => {
return (
)
}

但我希望了解如何使用 class leaf extends Component 来完成这项工作。感谢您的帮助。

供参考的数据结构

    {
    last_updated: 1572631066,
    ttl: 10,
    data: {
    stations: [
    {
    station_id: "237",
    external_id: "66db3c29-0aca-11e7-82f6-3863bb44ef7c",
    name: "E 11 St & 2 Ave",
    short_name: "5746.04",
    lat: 40.73047309,
    lon: -73.98672378,
    region_id: 71,
    rental_methods: [
    "CREDITCARD",
    "KEY"
    ],
    capacity: 39,
    rental_url: "http://app.citibikenyc.com/S6Lr/IBV092JufD?station_id=237",
    electric_bike_surcharge_waiver: false,
    eightd_has_key_dispenser: false,
    eightd_station_services: [
    {
    id: "e73b6bfb-961f-432c-a61b-8e94c42a1fba",
    service_type: "ATTENDED_SERVICE",
    bikes_availability: "UNLIMITED",
    docks_availability: "NONE",
    name: "Valet Service",
    description: "Citi Bike Station Valet attendant service available",
    schedule_description: "",
    link_for_more_info: "https://www.citibikenyc.com/valet"
    }
    ],
    has_kiosk: true
    },
    {
    station_id: "281",
    external_id: "66db5fae-0aca-11e7-82f6-3863bb44ef7c",
    name: "Grand Army Plaza & Central Park S",
    short_name: "6839.10",
    lat: 40.7643971,
    lon: -73.97371465,
    region_id: 71,
    rental_methods: [
    "CREDITCARD",
    "KEY"
    ],
    capacity: 66,
    rental_url: "http://app.citibikenyc.com/S6Lr/IBV092JufD?station_id=281",
    electric_bike_surcharge_waiver: false,
    eightd_has_key_dispenser: true,
    eightd_station_services: [
    {
    id: "32461582-cd1e-4ecf-a5ea-563593fa7009",
    service_type: "ATTENDED_SERVICE",
    bikes_availability: "UNLIMITED",
    docks_availability: "NONE",
    name: "Valet Service",
    description: "Citi Bike Valet Attendant Service Available",
    schedule_description: "",
    link_for_more_info: "https://www.citibikenyc.com/valet"
    }
    ],
    has_kiosk: true
    }
]
}
}

尝试

所以我在这里更改了 const 标记以反映来自 checkData 的 conosle.log：

const markers =  this.props.stations.data.stations.map((station) =>
        <Marker 
          position={[station.lat, station.lon]}
          onClick={this.markerClick.bind(this,station)}>
          <Popup>
          </Popup>
        </Marker>
              );

我收到以下错误：

TypeError: 无法读取未定义的属性“站”

当我删除标记变量并单击 checkData 时，请注意它没有问题映射和控制台记录对象：

【问题讨论】：

您遇到什么错误？由于您将 App 的 state.stations 作为名为 stations 的道具传递，因此在 Leaf.js 中您只需要执行 this.props.stations.map(() => {})。
this.props.stations.map is not a function 是您的建议有误。此外，当我点击按钮检查道具时，我绝对可以遍历数组并控制台记录所有对象而不会出现问题。但是对于标记，它不会映射，因为它在渲染块内部。我已经尝试过您的建议以及 const markers = this.props.stations.data.stations.map(e=>{}) 这给了我错误：无法读取未定义的属性“站”
我的猜测是stations 在初始化和根据您的请求设置它之间更改其数据类型。起初它看起来像是设置为一个数组，但随后设置为一个对象，您的数组嵌套在data 中。你能console.logres 并发布输出吗？
我认为它没有改变，因为其中的 checkData 函数能够控制台记录数组的映射。我在我的编辑中添加了。除非我不在？
我不知道，但您可以尝试仅在数据可用时进行渲染，以确保。

标签： javascript reactjs react-leaflet

【解决方案1】：

我会仔细检查您访问的数据属性是否正确，因为在您的函数中您调用的是this.props.stations.data.stations.map，但在您的渲染中您调用的是this.props.stations.data.map，所以肯定是错误的。

此外，类组件应为PascalCase，即大写。

【讨论】：

于是我把它改成了镜像，但仍然无法访问它，仍然不是运气。
如果您的函数成功记录数据，则地图应该可以工作。没有看到完整的数据结构就不能多说。
另外，很遗憾我无法在此处查看 Imgur 上托管的图片 :(
是的，我整天都被这件事难住了。如果您可以看一下，我也有一个指向该图像的链接（它显示了单击按钮检查 Props 的结果，这表明我正在访问数组的右侧部分）：ibb.co/PZ29dgV
链接无效。您是否收到任何错误消息？

【解决方案2】：

Camilo 是正确的，我需要确保数据可用于渲染。以下是工作代码：

App.js

//import logo from './logo.svg';
//import './App.css';

import React, { Component } from 'react';
import Leaf from './components/Leaf';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        height: "100vh",
        width: "100vw",
        latitude: 40.7128,
        longitude: -74.0060,
        zoom: 10
      },
      latitude: 40.7128,
      longitude: -74.0060,
      zoom: 10,
      stations: [],
      showStations: false,
      selectedStation: null,
      userLocation: {}
    };
  }

  componentDidMount() {
    const request = async()=> {
      await fetch('https://gbfs.citibikenyc.com/gbfs/en/station_information.json')
      .then(res => res.json())
      .then(res=>
        this.setState({stations: res, showStations: true}))
    }
    request();
  }

  checkData=()=>{
    console.log(this.state.stations)
    this.state.stations.data.stations.map(e=>{
      console.log(e)
    })
  }

  render() {

    return (
      <div>
          <button onClick={this.checkData}>click me</button>   
          <Leaf 
            viewport={this.state.viewport}
            stations={this.state.stations}
            showStations={this.state.showStations}/>
      </div>
    );
  }
}

export default App;

Leaf.js

import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
//import './leaf.css'
//import InfoBox from './InfoBox';
import { Button } from 'react-bootstrap';
//import Search from './Search';
//import Match from './Match';
//import Modal from './Modal';
//import L from 'leaflet';
//import Routing from "./RoutingMachine";
//import { Row, Col, Grid, Container } from 'react-bootstrap';
//import ErrorBoundary from '../ErrorBoundary/ErrorBoundary'



class Leaf extends Component {


    checkData=()=>{
        this.props.stations.data.stations.map(e=>{
          console.log(e)
        })
      }

    render() {

        let markers =null;
        if(this.props.showStations) {
        markers = (
            <div>
            {
            this.props.stations.data.stations.map((station) =>
                <Marker 
                    position={[station.lat, station.lon]}>
                </Marker>
                )
            }
            </div>
        )
        }


        const position = [this.props.viewport.latitude, this.props.viewport.longitude]
        //const position = [40.7484, -73.9857]
        return (
            <div>
                <button onClick={this.checkData}>check props</button>
                <Map center={position} zoom={14}>
                    <TileLayer
                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                      {markers}
                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>  
            </div>
        );
    }
}

export default Leaf;

【讨论】：