Я пытаюсь назначить массив в "опциях" компонентов MultiSelect в React JS, мне нужен определенный формат в массиве, но экран пуст, и я получаю options.map не является функциейошибка, возвращение массива успешно (это нормально), я не понимаю, почему происходит эта ошибка.
Мой код:
//I get data array
axios({
method: 'get',
url: `${URL}/suscripcion`,
headers: {
"Authorization": "bearer " + TOKEN
}
}).then(respuesta => {
let datos = respuesta.data;
if (datos.success) {
this.setState({
Suscritos: datos.data
});
sus = this.state.Suscritos;
} else {
console.log("no")
}
});
//Return array with format
Listarprueba() {
if (this.state.Suscritos.length > 0) {
return this.state.Suscritos.map((e, i) =>
[
{label: `${e.Email}`, value: `${e.Email}`}
]
);
}
}
//Asign array at options
options = this.Listarprueba();
//This is the MultiSelect Component
<div>
<h1>Multiselect dropdown</h1>
<Multiselect
options={this.options}
onSelectedChanged={this.handleSelectedChanged}
selected={selected}
isLoading={isLoading}
disabled={isLoading}
disableSearch={false}
overrideStrings={{
selectSomeItems: "do me a favor by selecting something",
allItemsAreSelected: "You have gone nuts... all selected",
selectAll: "do u wanna select all of them?",
search: "Fantasy search"
}}
/>
</div>
Я получаю данные массива 
и это ошибка 
Я получил пример здесь https://codesandbox.io/s/3k3vjplo5
Я думаю, что ошибкав опциях реквизита.
options={this.options}
Я хотел бы знать, как успешно реализовать MultiSelect в реагировать JS.
Хорошо, вот весь мой код компонента:
import React, { Component, Fragment } from 'react';
import { injectIntl } from 'react-intl';
import { Colxx, Separator } from "Components/CustomBootstrap";
import BreadcrumbContainer from "Components/BreadcrumbContainer";
import IntlMessages from "Util/IntlMessages";
import { Row, Card, CardBody, CardTitle, Input, Label, Button, } from "reactstrap";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import 'react-quill/dist/quill.bubble.css';
import { Formik, Field, Form } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import { URL, TOKEN } from 'Util/Config/Config';
import SweetAlert from 'sweetalert-react';
import Multiselect from "@khanacademy/react-multi-select";
class CrearNotificacion extends Component {
constructor(props) {
super(props);
this.state = {
textQuillBubble: "",
Suscritos: [],
sweetshow: false,
sweetTitle: '',
sweetText: '',
sweetType: '',
selected: [],
isLoading: true
};
this.handleChangeQuillBubble = this.handleChangeQuillBubble.bind(this);
}
Notificaciones = {
Asunto: '',
Suscripcion: '',
Notificacion: '',
}
handleChangeQuillBubble(textQuillBubble) {
this.setState({ textQuillBubble });
}
componentDidMount() {
axios({
method: 'get',
url: `${URL}/suscripcion`,
headers: {
"Authorization": "bearer " + TOKEN
}
}).then(respuesta => {
let datos = respuesta.data;
if (datos.success) {
this.setState({
Suscritos: datos.data
});
sus = this.state.Suscritos;
} else {
console.log("no")
}
});
setTimeout(() => {
this.setState({
isLoading: false
});
}, 5000);
}
handleSelectedChanged = selected => {
this.setState({ selected });
};
Guardar(value) {
axios({
method: 'post',
url: `${URL}/notificacion`,
headers: {
"Authorization": "bearer " + TOKEN,
},
data: {
Asunto: value.Asunto,
Suscripcion: value.Email,
Notificacion: this.state.textQuillBubble,
}
}).then((respuesta) => {
let datos = respuesta.data;
if (datos.success) {
this.setState({
sweetshow: true,
sweetText: datos.mensaje,
sweetTitle: "Mensaje",
sweetType: "success"
});
} else {
this.setState({
sweetshow: true,
sweetText: datos.error,
sweetTitle: "Mensaje",
sweetType: "error"
});
}
});
}
Cancelar() {
this.props.history.goBack();
}
Listarprueba() {
if (this.state.Suscritos.length > 0) {
return this.state.Suscritos.map((e, i) => (
{ label: `${e.Email}`, value: `${e.Email}` }
));
}
}
options = this.Listarprueba();
render() {
const { selected, isLoading } = this.state;
return (
<Fragment>
<Row>
<Colxx xxs="12">
<h1>{<IntlMessages id="menu.NewNoti" />}</h1>
<Separator className="mb-5" />
</Colxx>
</Row>
<Row className="mb-4">
<Colxx xxs="12">
<Card>
<CardBody>
<Formik
initialValues={this.Notificaciones}
validationSchema={NotificacionSchema}
onSubmit={value => {
this.Guardar(value);
}}
>
{({ errors, touched, values }) => (
<div>
<Form className="av-tooltip tooltip-label-bottom">
<Label className="form-group has-float-label">
<Field type="text" maxLength="45" name="Asunto" className="form-control" />
{errors.Asunto && touched.Asunto ? (
<div className="invalid-feedback d-block">{errors.Asunto}</div>
) : null}
<IntlMessages id="forms.asunto" />
</Label>
<Label className="form-group has-float-label">
{/* <Field type="hidden" name="Mensaje"/> */}
<ReactQuill
theme="bubble"
value={this.state.textQuillBubble}
onChange={this.handleChangeQuillBubble}
/>
{/* {errors.Mensaje && touched.Mensaje ? (
<div className="text-danger">{errors.Mensaje}</div>
) : null} */}
<IntlMessages id="forms.Notificacion" />
</Label>
<div>
<h1>Multiselect dropdown</h1>
{console.log(this.state.Suscritos)}
<Multiselect
options={this.options}
onSelectedChanged={this.handleSelectedChanged}
selected={selected}
isLoading={isLoading}
disabled={isLoading}
disableSearch={false}
overrideStrings={{
selectSomeItems: "do me a favor by selecting something",
allItemsAreSelected: "You have gone nuts... all selected",
selectAll: "do u wanna select all of them?",
search: "Fantasy search"
}}
/>
{/* {selected.join(", ")} */}
</div>
<br />
<Button color="primary col-6" type="submit">
<IntlMessages id="forms.submit" />
</Button>
<Button color="secondary col-6" onClick={() => this.Cancelar()}>
<IntlMessages id="forms.Cancelar" />
</Button>
</Form>
</div>
)}
</Formik>
<SweetAlert
show={this.state.sweetshow}
title={this.state.sweetTitle}
text={this.state.sweetText}
type={this.state.sweetType}
onConfirm={() => {
this.setState({ sweetshow: false })
this.props.history.push('app/Contacto/Notificaciones/Notificacion')
}}
/>
</CardBody>
</Card>
</Colxx>
</Row>
</Fragment>
);
}
}
export default injectIntl(CrearNotificacion);