WedX - журнал о программировании и компьютерных науках

React v16: Uncaught TypeError: невозможно прочитать свойство «объект» неопределенного

Я получаю эту ошибку и не знаю, что не так, мой код прост, я просто пытаюсь нажать массив. Это так просто, но пока не могу понять это.

Я использую 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,
};
03.11.2017

Ответы:


1

Эта ошибка появляется из-за того, что вы используете 16-ю версию React.js. В этом сообщении блога (объявление о версии React.js 16) можно прочитать:

Устаревшие элементы, появившиеся в версии 15.x, были удалены из основного пакета. React.createClass теперь доступен как create-react-class, React.PropTypes как prop-types...

Вы должны установить модуль prop-types с (если вы используете npm):

npm install --save prop-types

or

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,
};
03.11.2017

2

Если вы используете 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 не определен.

03.11.2017

3

В принятом ответе правильно отмечается, что prop-types теперь является собственным пакетом, я просто хотел добавить, что если вы пишете классы ES6 и уже используете функции ES6+, может быть более идиоматично установить PropTypes как статическую переменную в самом классе (примечание: это применимо в среде, использующей Babel с соответствующими пресетами).

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

Инженер Instagram написал отличный пост о React и ES6+. Вы можете ознакомиться с предложением по полям класса здесь и со всеми предложениями здесь.

03.11.2017

4

Из документов React,

Примечание. Начиная с React v15.5, React.PropTypes перемещен в другой пакет. Вместо этого используйте библиотеку prop-types. Мы предоставляем сценарий codemod для автоматизации преобразования.

См. https://reactjs.org/docs/typechecking-with-proptypes.htmlprop-types: https://github.com/facebook/prop-types
Установите пакет и импортируйте его в свой код.

03.11.2017

5

У меня те же проблемы.. и решить это следующим образом:

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,
}
18.04.2018
  • пожалуйста, проверьте эту ссылку о том, как задавать запросы stackoverflow.com/help/how-to-ask 18.04.2018
  • Пожалуйста, добавьте небольшое объяснение того, что вы сделали для решения проблемы и почему вы сделали это таким образом. это поможет людям понять исправление 18.04.2018

  • 6

    Я покажу пример того, как я изменил 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
        }
    }
    
    18.03.2021
    Новые материалы

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


    Для любых предложений по сайту: [email protected]