React-select: тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined - PullRequest
Новая
       5

React-select: тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined

0 голосов
/ 28 августа 2018

Я пытаюсь заполнить поле выбора данными из моей базы данных, но при попытке получить это сообщение об ошибке: 

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Event`.

Вот мой код: 

import Select from 'react-select';

class Event extends Component {
  ...

    render() {
        const getOptions = () => {
            return axios
                .get("/api/categories") // [{_id: "", name: "", user: ""... }, ...]
                .then(function (res) {
                    //res.data.map(el => ({ label: el.name, value: el._id }))
                    let options = res.data.map( cat => ({ value: cat._id, label: cat.name }));
                    return { options };
                });

          };
          return (
            ...
            <Select.Async 
              autoload={true}
              loadOptions={getOptions} />
            ...

Я нашел эту страницу с некоторыми примерами ее реализации, но все еще не могу избавиться от ошибки.

1 Ответ

0 голосов
/ 28 августа 2018

Этот пример, который вы связали, довольно старый, и async вызовы внутри render звучат не очень хорошо, вот пример того, как я использовал react-select для рендеринга нескольких вещей из моей базы данных 

import React from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";
import PropTypes from 'prop-types';


export const styles = {
    flex: {
        flexGrow: 1
    }
};

export class Options extends React.Component {
    state = {
        selectedOption: "BTC"
    };

    componentDidMount() {
        // We make our API calls here
        this.props.getTickers();
        this.props.setOption("BTC");
    }

    handleChange = selectedOption => {
        this.setState({selectedOption: selectedOption.value}, () => {
            this.props.setOption(this.state.selectedOption);
        });
    };

    formatOptions = (options = []) => {
        return options.map(option => {
            return {value: option.symbol, label: option.name};
        });
    };

    render() {
        const {options, classes} = this.props;
        const {selectedOption} = this.state;

        if (options === null) {
            return <p>Loading....</p>
        } else {
            return (
                <Select
                    className={classes.flex}
                    name="Search Currency"
                    value={selectedOption}
                    onChange={this.handleChange}
                    options={this.formatOptions(options)}
                    clearable={false}
                />
            );
        }
    }
}

Options.propTypes = {
    getTickers : PropTypes.func,
    setOption : PropTypes.func,
    options : PropTypes.array,
    classes : PropTypes.object
};

Options.defaultProps = {
    options : [],
    classes : {},
    getTickers: () => {},
    setOption : () => {}
};

export default Options;
...