Question

我的上下文返回未定义，所以我无法从提供程序获取名称值。

我在https://snack.expo.io/@johanmelin/functional-context做小吃了

代码看起来像

import React from 'react';
import { Text } from 'react-native';

const DataContext = React.createContext();

const DataProvider = props => {
  const [name, setName] = React.useState("John");

  return (
    <DataContext.Provider value={name}>
      {props.children}
    </DataContext.Provider>
  )
}

function App (props) {
  const data = React.useContext(DataContext);

  return (
    <DataProvider>
        <Text>hi {data.name}</Text>
    </DataProvider>
  )
}

export default App;

谁能看到我所缺少的东西？

Answer 1

提供者需要在使用者之前设置。在您的代码中，App首先呈现，因此您尝试在设置提供程序之前使用上下文。

所以您的代码应如下所示：

从'react'导入React；从'react-native'导入{Text};

const DataContext = React.createContext();

const DataProvider = props => {
  const data = React.useContext(DataContext);

  return (
    <Text>
       {data.value}
    </Text>
  )
}

function App () {
  const [name, setName] = React.useState("John");

  return (
    <DataContext.Provider value={name}>
          <DataProvider />
    </DataContext.Provider>
  )
}

export default App;

上下文返回未定义

1 个答案: