javascript - react 通过日期作为 Prop :“未定义不可迭代”

我是React的菜鸟。
我正在尝试获取来自另一个组件的变量。

这在MapLeaflet组件的js文件中

const date = props => {
  return (
    props.date);
};

第一个组件（创建变量为date的组件）为：

import React, { Component } from 'react';
import DateTimePicker from 'react-datetime-picker';
import MapLeaflets from './MapLeaflet';


class Picker extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date },
    function(){
      console.log("this works: " + this.state.date);
      //const DateContext = React.createContext(this.state.date);
      const DateContext =this.state.date


    })

  render() {

    return (

      <div>
        <DateTimePicker
          onChange={this.onChange}
          value={this.state.date}
        />
         { console.log(this.state.date) }
         <MapLeaflets date = {this.state.date}
         />
         )}
      </div>
    );
  }
}

export default Picker;

这是我的日志错误：


  TypeError：undefined是不可迭代的（无法读取属性
  符号（Symbol.iterator）



我已经广泛搜索了stackoverflow。这似乎是一个非常简单的问题，但在这里不起作用。我可以阅读使用儿童/父母或上下文的信息，但是我没有设法使其正常工作。我没有尝试过redux，但是我想仅通过一个道具就太过分了。

任何观察或建议都将得到重视。



编辑

感谢您的回答。实际上，错误日志来自第一个组件中的此行：

 <MapLeaflets date = {this.state.date}
 />

有人知道为什么它不起作用吗？

我也在编辑以包括mapleaflet组件的一部分，以便您了解我想在这个日期做什么。

  refreshStationsList() {
    const { updateFavStationsList, readStoredFav } = this.props;
    // console.log('refresh');
    const date = (props) => {
  return (
      <div>{props.date}</div>
  )
}
const request = `https:url`+date;
this.setState({ isLoading: true });

const favStationsId = readStoredFav();

axios.get(request)
  .then(result => {
    const stationsList = result.data.map(
      station => {
        const isFavorite = favStationsId.includes(station.number);
        return { ...station, isFavorite: isFavorite }
      }
    );
    this.setState({
      stationsList: stationsList,
      isLoading: false
    })
    updateFavStationsList(stationsList);
  })
  .catch(error => this.setState({
    apiDataError: error,
    isLoading: false
  }));
  }

  render() { ....etc

最佳答案

您的MapLeaflets组件应如下所示

const MapLeaflets = (props) => {
    return (
        <div>{props.date}</div>
    )
}

export default MapLeaflets;