React Router 4에서 PropTypes isRequired params prop

정적 프록시 유형에서 필수 문자열 값으로 설정하려는 match> params 객체에서 반응 라우터에서 소품을 전달했습니다. 사진으로 설정하면 : PropTypes.string.isRequired 오류가 발생합니다.React Router 4에서 PropTypes isRequired params prop

Warning: Failed prop type: The prop `photo` is marked as required in `BlogEntry`, but its value is `undefined`.

나는 라우터 소품을 통해 들어오는 것의 로그를 볼 때 사진이 문자열 ID임을 알 수 있습니다.

const {match:{params:{photo}}} = this.props; 
console.log("photo = ", photo); 
// result: 
photo = 5a03c474e1bbc026de896aa8

사진에 필수 입력 확인 기능이있는 방법이 있습니까?

여기가 나의 설정입니다.

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import PropTypes from 'prop-types'; 
import {fetchBlogEntry} from '../../actions/index'; 
import BlogPost from '../../components/client/blog-post'; 

class BlogEntry extends Component{ 

    constructor(props){ 
    super(props); 
    console.log('constructor = ', this.props.match.params.photo); 
    } 

    static propTypes={ 
    entry: PropTypes.object.isRequired, 
    photo: PropTypes.string.isRequired 
    } 

    componentWillMount(){ 
    const {match:{params:{photo}}} = this.props; 
    console.log("photo = ", photo); 
    this.props.fetchBlogEntry(photo); 
    } 

    render(){ 
    const {entry} = this.props; 
    return(
     <div id='blog' className='container'> 
     <BlogPost {...entry}/> 
     </div> 
    ) 
    } 
} 

function mapStateToProps({blog:{entry}}){ 
    return{ 
    entry 
    } 
} 

export default connect(({blog:{entry}}) => ({entry}), {fetchBlogEntry})(BlogEntry);

출처

2017-11-15 me-me

체크 사진을 입력하고 리액터 라우터에서 오는 경우 해당 포토가 일치한다고 예상하도록 변경해야합니다.

match: PropTypes.shape({ 
    params: PropTypes.shape({ 
     name: PropTypes.string.isRequired 
    }) 
    }),

출처

2017-11-15 15:43:42 Dakota

우수한 감사 : 예를 들어

나는 이 될 것 props.match.params.name 내 proptypes를 확인 입력합니다. 도큐멘트가 말하는 것보다 조금 더 모양을 설명해 주시겠습니까? "특정 모양을 취하는 물체". 중첩 된 객체에 모양을 사용하는 것 외에도 의미가 있거나 정확히 무엇을하는지. 아니면 그냥 (중첩 된 소품 유효성 검사를 허용) –

다른 사람이 귀하의 코드를 시도하는 경우에도 하나의 작은 수정. 이름 : Proptypes.string.isRequired는 이름이어야합니다 : PropTypes.string.isRequired. PropTypes의 자본금 T. –

Shape을 사용하면 객체의 필드를 설명 할 수 있습니다. 따라서 단지 객체라고 말하는 대신에 다음과 같은 객체를 말할 수 있습니다. 'objectOf'와 같이 객체를 설명하기위한 다른 prop 유형도 있지만 설명이 없습니다. 또한 나의 예를 고쳤다. – Dakota

React Router 4에서 PropTypes isRequired params prop

답변

관련 문제