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不可迭代（无法读取属性 Symbol（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

Answer 1

您的MapLeaflets组件应如下所示

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

export default MapLeaflets;

Answer 2

您正在尝试在> l[[1]][,'value'] value "some string" > l[[2]][,'value2'] [1] "more string" "other string"上循环，首先请确保您正在从api中获取数据。并始终尝试进行类型检查，然后再继续。您可以使用library(shiny) l <- c() value <- "some string" id <- "1" df <- cbind(id,value) l[[1]] <- df value2 <- c("more string", "other string") id2 <- c("2","3") df2 <- cbind(id2,value2) l[[2]] <- df2 ui <- fluidPage( selectizeInput("input", "selectize 1", l[[1]][,'value'], multiple=TRUE), verbatimTextOutput("out"), selectizeInput("input2", "selectize 2", l[[2]][,'value2'], multiple=TRUE), verbatimTextOutput("out2") ) server <- function(input,output){ output$out <- renderText({ input$input }) output$out2 <- renderText({ input$input2 }) } shinyApp(ui = ui, server = server)进行检查

反应通过日期作为道具：“不确定是不可迭代的”

编辑

2 个答案: