undefined не является объектом (оценка _react.default.PropTypes.fun c)

Question

Я имею в виду учебник, содержащий 8 разделов, начиная с недели, от которых база кода зависит от раздела 1. В последующем разделе я создал файл ColorForm. js согласно учебнику, который включает в себя приведенный ниже код , Когда я определил ColorForm.PropTypes, например

ColorForm.propTypes = {
    onNewColor: React.PropTypes.func.isRequired
}

, приложение выдало ошибку, undefined не является объектом (оценивает _react.default.PropTypes.fun c)

Обращаясь к различным постам, я узнал, что мне пришлось установить 'prop-types', хотя я получаю вышеуказанную ошибку. Может кто-нибудь помочь мне разобраться в этом вопросе. Заранее спасибо.

ColorForm. js

import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TextInput
} from 'react-native'

export default class ColorForm extends Component {
    constructor() {
        super()
        this.state = {
            txtColor: ''
        }

        this.props.onNewColor(this.state.txtColor.toLowerCase())
        this.submit = this.submit.bind(this)
    }

    submit() {
        this.setState({txtColor: ''})
    }

    render() {
        return(
            <View style = {styles.container}>
                <TextInput 
                    style = {styles.txtInput}
                    placeholder = "Enter a color..."
                    onChangeText={(txtColor) => this.setState({txtColor})}
                    value  = {this.state.txtColor}
                />
                <Text style = {styles.button} onPress={this.submit}>Add</Text>
            </View>
        )
    }
}

ColorForm.propTypes = {
    onNewColor: React.PropTypes.func.isRequired
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'lightgrey',
        height: 70
    },
    txtInput: {
        flex: 1,
        margin: 5,
        padding: 5,
        borderWidth: 2,
        fontSize: 20,
        borderRadius: 5,
        backgroundColor: 'snow'
    },
    button: {
        backgroundColor: 'darkblue',
        margin: 5,
        padding: 5,
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontSize: 20
    }
})

Answer 1

вместо React.PropTypes напрямую используют PropTypes.

шаг 1: import PropTypes from 'prop-types';

 onNewColor: PropTypes.func.isRequired 

шаг 2.

 constructor() {
        super()
        this.state = {
            txtColor: ''
        }

        this.props.onNewColor = this.onNewColor.bind(this)
        this.submit = this.submit.bind(this)
    }

    onNewColor(textColor) => {
      return textColor.toLowerCase()
    }

шаг 3:

  <TextInput 
      style = {styles.txtInput}
      placeholder = "Enter a color..."
      onChangeText={(txtColor) => this.setState({txtColor})}
      value  = {this.props.onNewColor(this.state.txtColor)}
  />