Реагируйте дату прохода как реквизиты: «undefined не повторяется»

Question

Я новичок в Реакте. Я пытаюсь получить переменную, которая поступает из другого компонента.

это в файле js для компонента MapLeaflet

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;

Вот моя ошибка журнала:

Ошибка типа: undefined не повторяется (не может прочитать свойство Symbol (Symbol.iterator))

Я интенсивно искал переполнение стека. Кажется, это довольно простая проблема, но она здесь не работает. Я могу читать использовать ребенка / родителей или контекст, но мне не удалось заставить его работать. Я не пробовал использовать приставку, но, думаю, было бы излишним просто пропустить реквизит.

Любое наблюдение или предложение будет оценено.

---

РЕДАКТИРОВАТЬ

Спасибо за ваш ответ. На самом деле журнал ошибок происходит из этой строки в первом компоненте:

 <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

Вы пытаетесь l oop на undefined, сначала убедитесь, что вы получаете данные из вашего API. и всегда пытайтесь сделать проверку типа, прежде чем продолжить. Вы можете использовать typeof для проверки типа

Answer 2

Ваш компонент MapLeaflets должен выглядеть следующим образом

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

export default MapLeaflets;