Javascript 反应通过日期作为道具：“未定义不可修改”

我是一个反应迟钝的人。 我试图得到一个来自另一个组件的变量

这是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不可编辑无法读取属性 SymbolSymbol.iterator

我已经广泛地搜索过了。这似乎是一个非常简单的问题，但它在这里不起作用。我可以使用儿童/父母或上下文进行阅读，但我没有设法使其发挥作用。我并没有尝试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;

---

您的MapLeaflets组件应该如下所示

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

export default MapLeaflets;

您试图在未定义的情况下循环，首先确保您从api获取数据。在继续之前，请务必进行类型检查。 您可以使用typeof进行类型检查

如果您试图在未定义上循环，请首先确保您正在从api获取数据。在继续之前，请务必进行类型检查。

---

您可以使用typeof进行类型检查

谢谢@iamWebKalakar！实际上，我编辑了我的问题，以显示我想在url中包含日期的位置。我试过你的方法，但我也犯了同样的错误！如果我做错了什么，请告诉我。实际上，这是生成错误的第一个组件中的这一行。不知道为什么。出现此错误是因为您在未定义上使用了映射函数。确保您正在从API获取res.数据我在哪里使用映射功能？日期不是未定义的。事实上，即使有，它也给出了相同的结果。字符串不是未定义的Hanks@iamWebKalakar！实际上，我编辑了我的问题，以显示我想在url中包含日期的位置。我试过你的方法，但我也犯了同样的错误！如果我做错了什么，请告诉我。实际上，这是生成错误的第一个组件中的这一行。不知道为什么。出现此错误是因为您在未定义上使用了映射函数。确保您正在从API获取res.数据我在哪里使用映射功能？日期不是未定义的。事实上，即使有，它也给出了相同的结果。字符串不是未定义的。请编辑字符串。事实上，即使我得到了完全相同的错误它是一个字符串。事实上，即使我有同样的错误