Estoy tratando de crear un estado predeterminado basado en el contexto del usuario, pero no pude usar el contexto fuera de la devolución de llamada de <myContext.Consumer>{myContext => {}}</myContext.Consumer> . Recibo el error anterior cuando intento usar setState en la devolución de llamada
Aquí está mi caso de uso:
import * as React from 'react' import Box from '@mui/material/Box' import PageTitle from '../01_shared/PageTitle' import { appCtx } from '../01_shared/appContext' const MyComponent = () => { const [options, setOptions] = React.useState({ currency: userContext.currency, // <=I need user context information here }) return <appCtx.Consumer>{translationContext => { // I cannot use React.useState here return ( <Box> <PageTitle>Hello {userCtx.firstName} you have 3 {options.currency}</PageTitle> </Box> ) }}</appCtx.Consumer> }; export default MyComponent Sé que puedo establecer el estado directamente después de tener acceso al userContext de usuario, pero parece más una solución alternativa que una solución adecuada.
¿Podría indicarme la dirección correcta, por favor?
Los componentes de la función pueden usar el useContext para obtener valores de contexto y, por lo tanto, no es necesario representar un <appCtx.Consumer> :
const MyComponent = () => { const userContext = React.useContext(appCtx); const [options, setOptions] = React.useState({ currency: userContext.currency, }); return ( <Box> <PageTitle> Hello {userContext.firstName} you have 3 {options.currency} </PageTitle> </Box> ); };