为啥我得到“未定义不是对象（评估 PropTypes.shape）”？

Posted 2023-03-15

【中文标题】为啥我得到“未定义不是对象（评估 PropTypes.shape）”？

【英文标题】：Why am I getting "undefined is not an object (evaluating PropTypes.shape)"?为什么我得到“未定义不是对象（评估 PropTypes.shape）”？

【发布时间】：2017-07-04 16:34:54

【问题描述】：

每当我尝试运行我的ios 模拟器时，我都会收到该错误。所有模块都已安装，我的图片的文件路径是正确的，除了出现在我的模拟器中的错误之外，我的 IDE 中没有抛出任何错误。错误如下图。

这里是Login.js：

import React, Component from 'react';
import StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView from 'react-native';

class Login extends Component 
    onButtonPress() 
        this.props.navigator.push(
            id: 'CreateAccount'
        );
    

    render() 
        return(
            <KeyboardAvoidingView behavior="padding" style=styles.container>
                    <TextInput
                        style=styles.input
                        returnKeyType="next"
                        keyboardType="email-address"
                        autoCorrect=false
                        placeholder="Email"
                    />

                    <TextInput
                        style=styles.input
                        returnKeyType="go"
                        placeholder="Password"
                        secureTextEntry
                    />

                    <TouchableOpacity>
                        <Text style=styles.loginAndCA>Login</Text>
                    </TouchableOpacity>

                    <TouchableOpacity onPress=this.onButtonPress.bind(this)>
                        <Text style=styles.loginAndCA>Create Account</Text>
                    </TouchableOpacity>
            </KeyboardAvoidingView>
        );
    


const styles = StyleSheet.create(
    container: 
        padding: 20 // Length of text input boxes.
    ,

    input: 
        backgroundColor: '#DAE5FF',
        padding: 20,
        paddingHorizontal: 15,
        marginBottom: 10,
        borderRadius: 15
    ,

    loginAndCA: 
        fontSize: 40,
        textAlign: 'center',
        color: 'white',
        fontFamily: 'Bodoni 72 Smallcaps',
        paddingHorizontal: 10
    
);

export default Login;

这里是BackGround.js：

import React, Component from 'react';
import StyleSheet, Image, View, Text from 'react-native';
import Login from './Login';

class BackGround extends Component 
    render() 
        return(
            <View style=styles.first>
                <Image style=styles.container source=require('../pictures/smoke.jpg')>
                    <View style=styles.second>
                         <View>
                            <Text style=styles.title>My App</Text>
                         </View>
                        <Login/>
                    </View>
                </Image>
            </View>
        );
    


const styles = StyleSheet.create(
    container: 
        flex: 1,
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)'
    ,

    first: 
        flex: 1
    ,

    second: 
       paddingTop: 290 // Moves both <TextInput> boxes down.
    ,

    title: 
        fontSize: 34,
        textAlign: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        fontFamily: 'Bodoni 72'
    

    // movementTitle: 
    //     paddingBottom: 34
    // 
);

export default BackGround;

这里是CreateAccount.js：

import React, Component from 'react';
import Text from 'react-native';

class CreateAccount extends Component 
    render() 
        return(
            <Text>Must get to this page</Text>
        );
    


export default CreateAccount;

这里是index.ios.js：

import React, Component from 'react';
import View, StyleSheet, AppRegistry from 'react-native';
import Navigator from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";

export default class App extends Component 
    render() 
        return(
            <View style=styles.back>
              <BackGround/>
              <Navigator
                  initialRoute=id: 'Login'
                  renderScene=this.navigatorRenderScene
              />
            </View>
        );
    

    navigatorRenderScene() 
        _navigator = navigator;
        switch(route.id) 
            case 'Login':
                return (<Login navigator=navigator title="Login"/>);
            case 'CreateAccount':
                return (<CreateAccount navigator=navigator title="Create Account" />);
        
    


const styles = StyleSheet.create(
    back: 
        flex: 1
    
);

AppRegistry.registerComponent('dendroApp', () => dendroApp);

【参考方案1】：

React 最近从 React 15.5 的核心库中删除了 PropTypes。

添加行

import PropTypes from 'prop-types';

然后直接从那里调用你的 proptypes。

【参考方案2】：

似乎 PropTypes 未定义。我没有看到它在您的代码中的任何地方声明。您必须通过文档中所示的单独模块导入它：PropTypes.

更新：

也许您正在使用的库正在使用现已弃用/不支持的 React.PropTypes。我建议使用更新的库或实际进入库并更新包，以便它使用来自单独包的新 PropTypes 而不是 React.PropTypes。这应该可以解决您的问题

【讨论】：

如何使用更新的库？

@klobbaks 您必须找出哪个包已过时。它应该在错误堆栈跟踪中告诉您。找出哪个包和文件正在使用 React.PropTypes，并在安装后用“prop-types”包中的 PropTypes 替换它，或者找到一个与过时库类似的最新库并替换它。

【参考方案3】：

是的，如果你升级 react: 15 或更高，那么你必须添加import PropTypes from 'prop-types';

但最近我在“react”中遇到了同样的问题：“16.0.0-beta.5”在我改变后

"dependencies": 
        "react": "16.0.0-alpha.12"
    ,
    "devDependencies": 
        "react-test-renderer": "16.0.0-alpha.12"
    

然后它发现工作正常。希望对您有所帮助！