[英]React Context and Provider - TypeError: variable is undefined
我试图有一个按钮,以便在按下时修改 React 上下文。 也就是说,我的上下文仅包含一个字符串列表,当 GET 请求成功时会填充该列表。 响应示例如下:
{
"message": "OK",
"status-code": 200,
"data": {
"models": [
"model1",
"model2",
"model3"
]
}
}
关于更新我的上下文的代码如下:
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
我还需要将结果显示为 Chakra-UI 有序列表。 然而, models
变量在<OrderedList />
块中仍未定义,即使我定义了一个 React Provider Context 块。 我得到的实际错误是: position <OrderedList>
中的“TypeError:models is undefined”。
先感谢您!
您没有正确使用上下文。 上下文用于在没有道具钻孔的情况下将值传递给孩子。 如果您有依赖相同变量的深层嵌套子级,这非常有用。 这样你就不必将它们作为道具传递下来,你可以通过使用useContext
钩子来抓取它们。 下面是一个如何使用 Context 的示例:
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>
);
}
在上面的示例中,您使用 state 值设置上下文值。 因此,您可以让useState
挂钩充当上下文的设置器。 在您的示例中,您不需要上下文,您可以使用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
您应该将模型包装在<ModelsContext.Provider value={{models}}>
中,然后在模型内部useContext
将从 Provider 返回值。
请参阅文档中的示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.