Tengo un componente de función en el que quiero agregar (con un botón más +) un grupo de filas, cada fila contiene entradas de texto y un selector desplegable. así que creo un estado global que contiene 2 listas, una tendrá los componentes (<TextInput ...>, <Picker ...>) y la otra tendrá el estado del valor que pasamos a los componentes para que pueda haga coincidir los dos objetos en la lista por sus índices:

 const [stockGroupes, setStockGroupes] = useState({ groupsInfoInputs: [], groupsInfoData: [], });

la imagen muestra cómo será el renderizado en el componente de función

el problema es: cuando hago clic en el menú desplegable y elijo algún valor, el estado cambió (en groupsInfoData [índice del menú desplegable] ) pero el valor en el menú desplegable aún se corrige ("AGA ..." como se muestra en la imagen de arriba), es de alguna manera, como cuando el componente se crea dinámicamente, no se vuelve a renderizar cuando cambia el estado, ¿es eso cierto? y cómo puedo obligar a volver a renderizar cuando cambia el estado. Espero haber podido describir mi problema, si quieres alguna explicación más házmelo saber.

EDITAR : cuando uso este enfoque para forzar la re-renderización

 const useForceUpdateInside = () => { const [value, setValue] = useState(0); // integer state return () => setValue((value) => value + 1); // update the state to force render };

el problema se resolvió, pero aparece el error justo después porque llamo a useForceUpdateInside dentro de la función que cambia el valor de dropdwon:

(Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:)