React.PropTypes.xxx控制台报错说xxx是undefined

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

记录分享一个项目错误。

之前的项目前端代码的一个组件里，因为React版本的升级导致组件出现问题。下面是报错信息和解决方法。

组件里

BodyIndex.propTypes = {

usernum: React.PropTypes.number

};

控制台报错显示的是：Cannot read property ‘number’ of undefined

在之前的版本之中，我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props，在15.5.0版本中，这一API被独立成了一个新的包 prop-types

1.5之前

import React from 'react';
import BodyChild from './bodychild';

const defaultProps = {
    username: '这是一个默认的用户名'
};

export default class BodyIndex extends React.Component {
    constructor() {
        super(); //调用基类的所有的初始化方法
        this.state = {
            username: "Parry",
            age: 20
        }; //初始化赋值
    };
    changeUserInfo(age) {
        this.setState({age: age});
    };
    handleChildValueChange(event) {
        this.setState({age: event.target.value});
    };
    render() {
        // setTimeout(()=>{
        //   //更改 state 的时候
        //   this.setState({username: "IMOOC",age : 30});
        // },4000);
        return (
            <div>
                <h2>页面的主体内容</h2>
                <p>接收到的父页面的属性：userid: {this.props.userid} username: {this.props.username}</p>
                <p>age: {this.state.age}</p>
                <input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
                <BodyChild {...this.props} id={4} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
            </div>
        )
    }
}

BodyIndex.propTypes = {
    userid: React.PropTypes.number.isRequired
};

BodyIndex.defaultProps = defaultProps;

1.5之后

import React, { Component } from 'react';
import BodyChild from '../components/bodychild.js'
import PropTypes from 'prop-types'; 

export default class Input extends Component {
    constructor() {
        super();
        this.state={
            username:"parry",
            age:'23'
        }
    }
    changeUserInfo(){
        this.setState({age:30})
    }
    handleChildValueChange(event){
        this.setState({age:event.target.value})
    }
    render() {
        // setTimeout(()=>{
        //     this.setState({
        //         username:'gaozheng'
        //     })
        // },4000)
        return (
            <div>
                <h2>{this.state.username}</h2>
                <h3>{this.state.age}</h3>
                <p>接收到的父页面的属性{this.props.username}{this.props.userid}</p>
                <input type="button" value="提交" onClick={this.changeUserInfo.bind(this)} />
                <BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)} />
            </div>
        )
    }
}
Input.propTypes= {
    userid: PropTypes.number.isRequired
}

React版本升级还是在15这个大版本下的一个小的升级。

如果是切换大版本需要多整个网站进行测试，然后把接口更新的问题一个一个解决。（主要是新旧版本的接口修改，这个是很不确定的，需要配合发布文档）。

好了这里分享结束。