React v16:Uncaught TypeError:无法读取未定义的属性“object”

时间:2017-11-03 03:19:42

标签: reactjs meteor

我收到此错误并且不知道什么是错的,我的代码很简单我只是想推送一个数组。是如此基本但却无法弄清楚。

我正在使用Meteor 1.5.3和React 16

import React, { Component, PropTypes } from 'react';

export default class ListMeds extends Component {
    render(){
        return(
            <li>{this.props.meds.text}</li>
        );
    }
}
ListMeds.propTypes = {
    meds: React.PropTypes.object.isRequired,
};

6 个答案:

答案 0 :(得分:5)

出现此错误是因为您使用的是第16版React.js。 In this博客文章(宣布React.js版本16)您可以阅读:

  

15.x中引入的弃用已从核心中删除   包。 React.createClass现在可用作create-react-class,   React.PropTypes作为prop-types ...

您应该安装prop-types模块(如果您使用npm):

npm install --save prop-types

yarn add prop-types

代表yarn案例。并以这种方式重写您的代码:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class ListMeds extends Component {
    render(){
        return(
            <li>{this.props.meds.text}</li>
        );
    }
}
ListMeds.propTypes = {
    meds: PropTypes.object.isRequired,
};

答案 1 :(得分:1)

如果您使用的是React 15+,则需要单独导入prop-types包。您的代码应为:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class ListMeds extends Component {
    render(){
        return(
            <li>{this.props.meds.text}</li>
        );
    }
}
ListMeds.propTypes = {
    meds: React.PropTypes.object.isRequired,
};

请注意,错误显示“未定义的对象”,这意味着React.PropTypes未定义。

答案 2 :(得分:0)

来自React docs,

  

注意:自React以来,React.PropTypes已移入另一个包中   V15.5。请改用prop-types库。我们提供了一个codemod   用于自动转换的脚本。

https://reactjs.org/docs/typechecking-with-proptypes.html
道具类型库:https://github.com/facebook/prop-types
安装软件包并将其导入代码中。

答案 3 :(得分:0)

接受的答案正确地指出prop-types现在是它自己的包,我只是想补充一点,如果你正在编写ES6类并且已经使用了ES6 +功能,那么将PropTypes设置为静态变量可能更为惯用。类本身(注意:这适用于使用具有适当预设的Babel的环境)。

export default class ListMeds extends Component {
    static propTypes = {
         // propTypes
    }
    render() {
         // etc
    }
}

Instagram工程师在React and ES6+上写了一篇很棒的帖子。您可以查看课程字段here的提案和所有提案here

答案 4 :(得分:0)

我遇到了同样的问题..并解决了这个问题:

import React, { Component, PropTypes } from 'react';

export default class ListMeds extends Component {
    render(){
        return(
            <li>{this.props.meds.text}</li>
        );
    }
}
ListMeds.propTypes = {
    meds: PropTypes.object.isRequired,
}

答案 5 :(得分:0)

我将展示一个关于如何将 React.PropTypes.object 更改为 PropTypes.object 以解决显示的所有错误的示例。代码源链接是:

  1. https://github.com/jitsi/jitsi-meet/blob/move_logging_config/react/features/app/components/AbstractApp.js

  2. https://github.com/jitsi/jitsi-meet/blob/move_logging_config

import React, { Component } from 'react';

import {
    localParticipantJoined,
    localParticipantLeft
} from '../../base/participants';

import {
    appNavigate,
    appWillMount,
    appWillUnmount
} from '../actions';

/**
 * Default config.
 *
 * @type {Object}
 */
const DEFAULT_CONFIG = {
    configLocation: './config.js',
    hosts: {
        domain: 'meet.jit.si'
    }
};

/**
 * Base (abstract) class for main App component.
 *
 * @abstract
 */
export class AbstractApp extends Component {
    /**
     * AbstractApp component's property types.
     *
     * @static
     */
    static propTypes = {
        config: React.PropTypes.object,
        store: React.PropTypes.object,

        /**
         * The URL, if any, with which the app was launched.
         */
        url: React.PropTypes.string
    }

    /**
     * Init lib-jitsi-meet and create local participant when component is going
     * to be mounted.
     *
     * @inheritdoc
     */
    componentWillMount() {
        const dispatch = this.props.store.dispatch;

        dispatch(appWillMount(this));

        dispatch(localParticipantJoined());

        const config
            = typeof this.props.config === 'object'
                ? this.props.config
                : DEFAULT_CONFIG;

        this._openURL(this.props.url || `https://${config.hosts.domain}`);
    }

    /**
     * Dispose lib-jitsi-meet and remove local participant when component is
     * going to be unmounted.
     *
     * @inheritdoc
     */
    componentWillUnmount() {
        const dispatch = this.props.store.dispatch;

        dispatch(localParticipantLeft());

        dispatch(appWillUnmount(this));
    }

    /**
     * Create a ReactElement from the specified component, the specified props
     * and the props of this AbstractApp which are suitable for propagation to
     * the children of this Component.
     *
     * @param {Component} component - The component from which the ReactElement
     * is to be created.
     * @param {Object} props - The read-only React Component props with which
     * the ReactElement is to be initialized.
     * @returns {ReactElement}
     * @protected
     */
    _createElement(component, props) {
        /* eslint-disable no-unused-vars, lines-around-comment */
        const {
            // Don't propagate the config prop(erty) because the config is
            // stored inside the Redux state and, thus, is visible to the
            // children anyway.
            config,
            // Don't propagate the dispatch and store props because they usually
            // come from react-redux and programmers don't really expect them to
            // be inherited but rather explicitly connected.
            dispatch, // eslint-disable-line react/prop-types
            store,
            // The url property was introduced to be consumed entirely by
            // AbstractApp.
            url,
            // The remaining props, if any, are considered suitable for
            // propagation to the children of this Component.
            ...thisProps
        } = this.props;
        /* eslint-enable no-unused-vars, lines-around-comment */

        // eslint-disable-next-line object-property-newline
        return React.createElement(component, { ...thisProps, ...props });
    }

    /**
     * Navigates this AbstractApp to (i.e. opens) a specific URL.
     *
     * @param {string} url - The URL to which to navigate this AbstractApp (i.e.
     * the URL to open).
     * @protected
     * @returns {void}
     */
    _openURL(url) {
        this.props.store.dispatch(appNavigate(url));
    }
}

修改后的代码有如下添加

yarn add prop-types
import PropTypes from 'prop-types';
export class AbstractApp extends Component {
    /**
     * AbstractApp component's property types.
     *
     * @static
     */
    static propTypes = {
        config: PropTypes.object,
        store: PropTypes.object,

        /**
         * The URL, if any, with which the app was launched.
         */
        url: PropTypes.string
    }
}