Estoy tratando de tener un botón tal que cuando se presiona se modifica un contexto React. Es decir, mi contexto consta solo de una lista de cadenas, que se completa cuando una solicitud GET tiene éxito. Un ejemplo de la respuesta es la siguiente:
{ "message": "OK", "status-code": 200, "data": { "models": [ "model1", "model2", "model3" ] } }El código con respecto a la actualización de mi contexto es el siguiente:
import React from 'react' import { VStack, Button, OrderedList, ListItem } from '@chakra-ui/react' const Endpoint = 'http://localhost:5000/' const ModelsContext = React.createContext([]) function Models() { const [models, setModels] = React.useContext(ModelsContext) const updateModels = async () => { await fetch(Endpoint + 'models', { method: 'GET', headers: { Accept: 'application/json' } }) .then((resp) => resp.json()) .then(function(data) { setModels(data.models) }) } return ( <VStack> <Button size="sm" colorScheme='teal' variant='solid' onClick={updateModels}> Get Models List </Button> <ModelsContext.Provider value={{models}}> <OrderedList> { models.map((name) => ( <ListItem> {name} </ListItem> )) } </OrderedList> </ModelsContext.Provider> </VStack> ) } export default Models También necesito mostrar los resultados como una lista ordenada de Chakra-UI. Sin embargo, la variable de models permanece sin definir dentro del <OrderedList /> , incluso si definí un bloque de contexto de proveedor de React. El error real que obtengo es: "TypeError: models is undefined" en la posición <OrderedList> .
¡Gracias de antemano!
No estás usando el contexto correctamente. El contexto es para pasar valores a los niños sin perforaciones de utilería. Es excelente si tiene niños profundamente anidados que dependen de las mismas variables. De esa manera, no tiene que pasarlos como accesorios, simplemente puede agarrarlos usando el gancho useContext . Aquí hay un ejemplo de cómo usar Contexto:
const Endpoint = 'http://localhost:5000/' const ModelsContext = createContext([]) function ModelsContextProvider({children}) { const [models, setModels] = useState([]) return ( <ModelsContext.Provider value={{models, setModels}}> {children} </ModelsContext.Provider> ) } function Models() { const { models, setModels } = useContext(ModelsContext) const updateModels = async () => { await fetch(Endpoint + 'models', { method: 'GET', headers: { Accept: 'application/json' } }) .then((resp) => resp.json()) .then(function(data) { setModels(data.models) }) } return ( <VStack> <Button size="sm" colorScheme='teal' variant='solid' onClick={updateModels}> Get Models List </Button> <OrderedList> { models.map((name) => ( <ListItem> {name} </ListItem> )) } </OrderedList> </VStack> ) } export default function App() { return ( <ModelsContextProvider> <Models /> </ModelsContextProvider> ); } En el ejemplo anterior, está configurando el valor de contexto con el valor de estado. Entonces puede hacer que el useState actúe como su setter para el contexto. En su ejemplo, no necesita contexto, solo puede usar el useState .
const Endpoint = 'http://localhost:5000/' function Models() { const [models, setModels] = React.useState([]) const updateModels = async () => { await fetch(Endpoint + 'models', { method: 'GET', headers: { Accept: 'application/json' } }) .then((resp) => resp.json()) .then(function(data) { setModels(data.models) }) } return ( <VStack> <Button size="sm" colorScheme='teal' variant='solid' onClick={updateModels}> Get Models List </Button> <OrderedList> { models.map((name) => ( <ListItem> {name} </ListItem> )) } </OrderedList> </VStack> ) } export default Models