PropTypes isRequired on React Router 4 params prop

Question

我已经在其 match > params 对象中从 React 路由器传递了道具，我想在我的静态 propTypes 中将其设置为必需的字符串值。当我将它设置为照片时：PropTypes.string.isRequired 我得到一个错误。

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);

Answer 1

如果你想输入检查照片并且它来自 React Router，你必须更改你的道具以期望它匹配。

例如，如果我想键入检查 props.match.params.name 我的 proptypes 将是：

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

PropTypes isRequired on React Router 4 params prop

PropTypes isRequired on React Router 4 params prop

reactjs

react-proptypes