reactjs - React Router 4 params prop 上的 PropTypes isRequired

Question

我在其 match > params 对象中从 React 路由器传递了 props，我希望将其在静态 propTypes 中设置为必需的字符串值。当我将其设置为照片时:PropTypes.string.isRequired 我收到错误。

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

当我记录通过路由器 Prop 传入的内容时，我可以看到照片是一个字符串 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 以期望它匹配。

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

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