javascript - React 将日期传递为 props : "undefined is not iterable"

Question

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

这是在 MapLeaflet 组件的 js 文件中

const date = props => {
  return (
    props.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 is not iterable (cannot read property Symbol(Symbol.iterator))

我广泛搜索了 stackoverflow。这看起来是一个非常简单的问题，但在这里却行不通。我可以阅读使用子/ parent 或上下文，但我没有设法使其工作。我没有尝试 redux，但我想仅仅传递一个 props 就太过分了。

任何观察或建议都会受到重视。

<小时/>

编辑

谢谢你的回答。实际上错误日志来自第一个组件中的这一行:

 <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 

Answer 1

您的 MapLeaflets 组件应如下所示

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

export default MapLeaflets;