Estoy tratando de usar react-bootstrap-typeahead en un proyecto. Funciona como se esperaba cuando lo pruebo en un entorno limitado en línea (puedo expandir el menú desplegable y hacer una selección). Cuando trato de usarlo en mi proyecto, el componente se procesa, pero al hacer clic en él, la página se bloquea con un error:
react-dom.development.js:24447 Uncaught Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.A continuación se muestra el componente de prueba que estoy tratando de representar que tomé de otra publicación de desbordamiento de pila
import React, { useState } from 'react'; import { Typeahead } from 'react-bootstrap-typeahead'; const MyTypeahead= () => { const [selected, setSelected] = useState([]); return ( <div> <Typeahead id="basic-typeahead-example" labelKey="state" onChange={setSelected} options={[ { state: 'AL' }, { state: 'AK' }, { state: 'AZ' }, { state: 'AR' }, { state: 'CA' }, ]} placeholder="Choose a state..." selected={selected} /> </div> ); }; export default MyTypeahead;¿Qué falta? Tengo la sensación de que hay una especie de gran brecha en mi comprensión de la gestión estatal.
No pase la función useState-update directamente en onChange. En su lugar, escriba una devolución de llamada y pásela. Además, en su caso, no necesita usar objetos en las opciones, solo use cadenas simples:
const MyTypeahead = () => { const [selected, setSelected] = useState([]); const handleChange = (selected) => setSelected(selected); return ( <div> <Typeahead id="basic-typeahead-example" labelKey="state" onChange={handleChange} options={["AL", "AK", "AZ", "AR", "CA"]} placeholder="Choose a state..." selected={selected} /> </div> ); }; export default MyTypeahead;https://codesandbox.io/s/adoring-pare-33v6oh
Con respecto a flushSync, es un problema conocido en el repositorio:
https://github.com/ericgio/react-bootstrap-typeahead/issues/715
Aunque se muestra el mensaje de error, el componente de escritura anticipada parece funcionar como debería. Sugeriría ignorar este mensaje de error hasta que se solucione.