Estoy tratando de usar react-select en combinación con match-sorter como se describe en esta respuesta de stackoverflow ( su versión de trabajo ). Tengo una matriz inicial de objetos que se asignan a una matriz de objetos con el value y las propiedades de label requeridas por react-select, que se almacena en el estado. Esa matriz se pasa directamente a reaccionar-seleccionar, y cuando hace clic por primera vez en el cuadro de búsqueda, todo se ve bien, todas las opciones están ahí. La prop onInputChange recibe una llamada a matchSorter, que a su vez recibe la matriz, el nuevo valor de entrada y la clave en la que se deben ordenar los objetos. En mi proyecto, y reproducido en la caja de arena, tan pronto como escribe algo en el campo de entrada, todas las opciones desaparecen y se reemplazan por el mensaje no options . Si hace clic fuera del cuadro y vuelve a entrar, las opciones ordenadas se muestran como deberían. Vea mi caja de arena para el problema, y aquí está el código de la caja de arena:

 import "./styles.css"; import { matchSorter } from "match-sorter"; import { useState } from "react"; import Select from "react-select"; const objs = [ { name: "hello", id: 1 }, { name: "world", id: 2 }, { name: "stack", id: 3 }, { name: "other", id: 4 }, { name: "name", id: 5 } ]; const myMapper = (obj) => { return { value: obj.id, label: <div>{obj.name}</div>, name: obj.name }; }; export default function App() { const [options, setOptions] = useState(objs.map((obj) => myMapper(obj))); return ( <Select options={options} onInputChange={(val) => { setOptions(matchSorter(options, val, { keys: ["name", "value"] })); }} /> ); }

Estoy seguro de que la matriz en estado no se elimina ni nada, he registrado en la consola cada paso del camino y la matriz definitivamente se clasifica correctamente por el clasificador de coincidencias. Es solo que tan pronto como escribe algo, reaccionar-seleccionar deja de mostrar cualquier opción hasta que haga clic para salir y volver a entrar. ¿Tiene algo que ver con el uso de JSX como valor de label ? Estoy haciendo eso en mi proyecto para mostrar una imagen junto con las opciones.