Actualmente estoy intentando implementar react-select en una aplicación web que estoy desarrollando, pero cada vez que se procesa, falla toda la aplicación de reacción con el error minimizado # 130: el tipo de elemento no es válido: se esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto.
El código que genera procedimentalmente estos elementos de selección se ve como tal
let optionObjects = await retrievePropertyOptions(null, null, null, property, true) let options = this.listOptionConstructor(optionObjects, true) //options returns an array of objects with value and label properties let selector = <React.Fragment key={number}> <label className="cssclasses" for={`select-custom-${name}`}> {name}</label> <ReactSelect options={options} onChange={(selected) => { this.setState({ [`multi-selector${number}`]: selected })}} value = {this.state[`multi-selector${number}`]} /> </React.Fragment> Y mi importación es simplemente const ReactSelect = require('react-select')
¿Alguien sabe por qué me encuentro con este error? Funciona perfectamente con todo, además del componente de selección de reacción, por lo que estoy muy confundido sobre lo que pude haber hecho mal. También probé la importación como un objeto desestructurado por si acaso y todavía me encontré con el mismo problema. Cuando cierro el selector de console.log, obtengo un objeto que se ve idéntico a cualquier otro objeto de fragmento de reacción, y estoy agrupando mis archivos usando un paquete web que creo que está configurado correctamente a medida que se construye y funciona perfectamente además de este problema. Cualquier sugerencia es apreciada.
editar: creó un codepen para mostrar el problema ( https://codepen.io/AugustTGuenther/pen/abmJEpx ), obteniendo un error diferente aquí y una descripción un poco más del error de reacción, pero aún no quiere renderizar incluso con datos simulados estáticos como las opciones. Me imagino que si alguien pudiera señalar lo que estoy haciendo mal allí, sería el mismo problema en mi código real: versiones de reacción coincidentes y versiones de reacción seleccionadas para el código real también.
Puede probar este fragmento de código donde la obtención de datos se realiza en un useEffect y luego el valor se establece en state y se pasa en las opciones de react-select. En su mayoría, debería ser un problema con las opciones que se han creado. También sería bueno si pudieras mover la lógica de obtención de datos al gancho useEffect.
import * as React from 'react'; import ReactSelect from 'react-select'; // mockData is just a mock.It should be coming from the server. const mockData = [ { value: 'some value', label: 'some label 1 ' }, { value: 'some value', label: 'some label 2' }, { value: 'some value', label: 'some label 3' }, ]; export default function App() { const [response, setResponse] = React.useState([]); const retrievePropertyOptions = () => { return new Promise((resolve) => { resolve(mockData); }); }; React.useEffect(() => { async function getProperties() { const result = (await retrievePropertyOptions()) as any; setResponse(result); } getProperties(); }, []); return ( <div> <ReactSelect options={response} /> </div> ); }