undefined 不是一个对象(评估 _react.default.PropTypes.func) [英] undefined is not an object (evaluating _react.default.PropTypes.func)

问题描述

一周以来我一直在参考一个包含 8 个部分的教程，代码库依赖于第 1 部分.在后面的部分中，我根据教程创建了一个 ColorForm.js 文件，其中包含以下代码.当我定义了 ColorForm.PropTypes 如

I have been referring a tutorial having 8 sections since a week, on which the code base depends from section 1. On the later section, I had created a ColorForm.js file as per the tutorial which includes the below code. When I have defined the ColorForm.PropTypes such as

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

应用抛出错误，undefined 不是对象(评估 _react.default.PropTypes.func)

在参考各种帖子时，我知道我必须安装prop-types"，即使我收到上述错误.谁能帮我解决这个问题.提前致谢.

On referring various post I came to know that I had to install 'prop-types', even though I am getting the above error. Can anyone help me to sort out this issue. Thanks in advance.

ColorForm.js

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

推荐答案

Insted of React.PropTypes 直接使用 PropTypes.

insted of React.PropTypes use PropTypes directly.

第一步:从'prop-types'导入PropTypes;

 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()
    }

第三步:

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

这篇关于undefined 不是一个对象(评估 _react.default.PropTypes.func)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！