He usado React-Select para hacer una barra de búsqueda para mi proyecto. La barra de búsqueda debe tener tres opciones para las ventajas y tres para las desventajas que se pueden alternar desde otro componente.
Todo esto funciona según lo previsto hasta que hago una selección y luego hago clic en actualizar página y aparece el siguiente error
Aquí hay una esencia del componente en cuestión.
https://gist.github.com/Uken81/2dc41c937e587c0b9f8b595426d1573c
Aquí está el código que creo que está causando el error.
useEffect(() => { const createSearchOptions = () => { let adsArr = AdvantagesArray.map((opt) => ({ label: opt.title, value: opt, category: opt.type })); let disadsArr = DisadvantagesArray.map((opt) => ({ label: opt.title, value: opt, category: opt.type })); setAdvantageOptions(adsArr); setDisadvantageOptions(disadsArr); }; createSearchOptions(); }, []); const formatOptionLabel = ({ label, category }) => ( <div style={category === 'advantage' ? { color: 'seagreen' } : { color: 'brown' }}>{label}</div> ); <div className="toggle-and-search"> <ToggleAdvantageDisadvantage /> <Select className="searchBar" options={isChoosingAdvantages ? advantageOptions : disadvantageOptions} value={selectInput} isMulti onChange={handleChange} formatOptionLabel={formatOptionLabel} /> </div>Después de investigar un poco, intenté envolver la variable de etiqueta que se encuentra en la línea 73 entre llaves dobles como esta {{label}}. Cuando probé esto, obtuve un error diferente tan pronto como hice una selección en la barra de búsqueda.
Creo que esto debe significar que es la variable de la etiqueta la que está causando el error, pero no estoy seguro de cómo puedo detener el error si el usuario actualiza mientras mantiene la funcionalidad de mi barra de búsqueda. Intenté simplemente extraer los títulos de cadena en una matriz y usarlos, pero la selección ya no funciona correctamente. También probé otras formas de usar matrices aquí, pero todas rompieron mi barra de búsqueda.
Si alguien puede ayudarme a solucionar este error, estaría muy agradecido y si alguien pudiera explicarme exactamente qué está pasando, sería maravilloso.