反应上下文和提供者 - 类型错误：变量未定义

Question

我试图有一个按钮，以便在按下时修改 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 块。 我得到的实际错误是：<OrderedList> 位置的“TypeError：模型未定义”。

提前谢谢你！

Answer 1

您没有正确使用上下文。上下文用于在没有道具钻孔的情况下将值传递给孩子。如果您有依赖相同变量的深层嵌套子级，这非常有用。这样您就不必将它们作为道具传递下来，您只需使用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>
  );
}

在上面的示例中，您正在使用状态值设置上下文值。因此，您可以让 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

Answer 2

您应该将模型包装在<ModelsContext.Provider value={{models}}> 中，然后在模型内部useContext 将返回来自Provider 的值。

参见doc中的示例