Как исправить Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект - PullRequest
0 голосов
/ 29 октября 2018

Я пытаюсь запустить приложение ReactRails и пытаюсь запустить очень простой компонент реагировать на выбор. Однако, в том же файле, если я печатаю простой элемент h2, он работает, но <Select/> не работает. Это дает:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Я пытаюсь использовать react-select компонент. Я установил его с помощью команды yarn add.

User.jsx:

var React = require("react")
var Select = require("react-select")
var PropTypes = require("prop-types")

// also tried these ->
// import React from 'react';
// import createClass from 'create-react-class';
// import PropTypes from 'prop-types';
// import Select from 'react-select';


const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

class User extends React.Component {
  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    /*
    return (
             <h2>THIS WORKS!</h2>
    )
    */



    return (
             <Select
                 value={selectedOption}
                 onChange={this.handleChange}
                 options={options}
             />
    )

    // Doesn't work:
    // Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  }
}
module.exports = User

Я очень новичок в мире Реакта. Что мне здесь не хватает? Что я делаю не так?

Примечание. Это не решило мою проблему: Неопознанная ошибка: нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция, но получено: object

1 Ответ

0 голосов
/ 29 октября 2018

Я не уверен, как module.exports играет с React. Когда я пробую ваш код с синтаксисом ES6, кажется, что он работает нормально.

import React from 'react';
import Select from 'react-select';

и затем использовать экспорт ES6 вместо module.exports:

export default User;

Компонент Select, похоже, не является проблемой.

...