es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React Context y Provider – TypeError: variable está indefinida

Estoy intentando tener un botón de modo que cuando se presiona, se modifica un contexto de React.
Es decir, mi contexto consiste únicamente en una lista de cadenas, que se llena cuando se realiza una solicitud GET.
Un ejemplo de la respuesta es el siguiente:

{
  "message": "OK",
  "status-code": 200,
  "data": {
    "models": [
      "modelo1",
      "modelo2",
      "modelo3"
    ]
  }
}

El código relacionado con 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}">
                Obtener lista de modelos
            </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 models permanece sin definir dentro del bloque <orderedlist></orderedlist>, incluso si definí un bloque Provider Context de React.
El error actual que obtengo es: “TypeError: models is undefined” en la posición <orderedlist>.

¡Gracias de antemano!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para solucionar el problema de que la variable models está indefinida dentro del bloque <orderedlist></orderedlist>, debes asegurarte de que el valor inicial de ModelsContext sea un objeto con una clave models configurada como un arreglo vacío. Esto se debe a que el hook useContext devuelve el valor transmitido desde el componente Provider coincidente más cercano, que en este caso es ModelsContext.Provider.

    Entonces, puedes actualizar la siguiente línea:

    const [models, setModels] = React.useContext(ModelsContext)
    

    a esto:

    const {models} = React.useContext(ModelsContext)
    

    También actualiza la línea createContext a esto:

    const ModelsContext = React.createContext({models: []})
    

    Con estos cambios, el componente Models debe mostrar correctamente la lista de modelos.

Comments are closed.