하위 구성 요소가 정의되지 않은 것으로 소품을 가져옵니다.

Question

컨트롤러 아래에있는 하위 구성 요소에 소품을 전달하려고합니다. 탐색을 위해 redux와 react-router를 사용하고 있습니다. 문제는 컨트롤러에서 모든 것이 잘되고, 초기 소품을 얻는다는 것입니다. 그러나 자식에게 전달할 때 생성자 또는 렌더링 함수 중 하나가 정의되지 않았습니다.

import React, { Component } from 'react' 
 
import { connect } from 'react-redux' 
 
import moment from 'moment' 
 

 
import LawsuitSchedule from '../components/LawsuitSchedule' 
 
import LawsuitCalendar from '../components/LawsuitCalendar' 
 

 
class LawsuitScheduleContainer extends Component { 
 
    constructor (props) { 
 
    super(props) 
 
    } 
 

 
    render() { 
 
    let {schedule} = this.props 
 
    console.log(schedule) 
 

 
    return (
 
     <LawsuitCalendar initialDate={schedule.initialDate} 
 
         selectedDate={schedule.selectedDate} 
 
         scheduledDates={schedule.scheduledDates}/>, 
 
     <LawsuitSchedule/> 
 
    ) 
 
    } 
 
} 
 

 
const mapStateToProps = state => ({ 
 
    schedule: state.schedule, 
 
}) 
 

 
export default connect(mapStateToProps)(LawsuitScheduleContainer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import React, { Component } from 'react' 
 
import PropTypes from 'prop-types' 
 
import momentPropTypes from 'react-moment-proptypes' 
 
import moment from 'moment' 
 
import DatePicker from 'react-datepicker' 
 
import 'react-datepicker/dist/react-datepicker.css' 
 
import '../styles/lawsuitCalendar.css' 
 

 
export default class LawsuitCalendar extends Component { 
 
    constructor (props) { 
 
    super(props) 
 
    console.log(props) 
 
     } 
 
    propTypes = { 
 
    selectedDate: momentPropTypes.momentString, 
 
    scheduledDates: PropTypes.array.isRequired, 
 
    } 
 

 
    handleChange = (date) => { 
 
    this.setState({ 
 
     selectedDate: date, 
 
    }) 
 
    } 
 

 
    render() { 
 
    let {selectedDate, scheduledDates} = this.props 
 
    let highlightWithRanges = [ 
 
     { 
 
     'scheduled-date': scheduledDates, 
 
     }, 
 
    ] 
 
    return (
 
     <DatePicker 
 
     inline 
 
     selected={selectedDate} 
 
     onChange={this.handleChange} 
 
     highlightDates={highlightWithRanges} 
 
     /> 
 
    ) 
 
    } 
 
}

Answer 1

문제가 너무 LawsuitCalendar를 렌더링 다른 구성 요소에 있었다 : 여기 내 코드입니다. 나는 단 한 번만 표시되는 이유를 모르지만 소품으로 문제를 해결했습니다. 단지 전달하지 않았습니다. 나는 그것을 추가했다, 누군가는 왜 그 일이 일어 났는지 대답 할 수 있을까? 회신에 대한

import React, { Component } from 'react' 
 
import PropTypes from 'prop-types' 
 
import { Grid, Row, Col } from 'react-bootstrap' 
 
import { Link } from 'react-router-dom' 
 
import ReactTable from 'react-table' 
 
import matchSorter from 'match-sorter' 
 
import LawsuitCalendar from '../components/LawsuitCalendar' 
 
import '../styles/lawsuitGrid.css' 
 
import data from '../utils/data.json' 
 

 
export default class LawsuitSchedule extends Component { 
 
    render() { 
 
    return (
 
     <Grid> 
 
     <Row className="show-grid"> 
 
      <Col md={4}><LawsuitCalendar/></Col> 
 
      <Col md={8}> 
 
      <ReactTable data={data} 
 
      ... 
 
      /> 
 
      </Col> 
 
     </Row> 
 
     </Grid> 
 
    ) 
 
    } 
 
}

는