从使用 Context 配置的全局变量中仅获取未定义的值

Question

我有一个包含两个页面的 React Native 应用程序。在第一页上，我有一个选择器，我需要第二页中的数据。我尝试使用 Context 使 sate 全局可用，但直到现在我还没有让它工作，因为我只在我想插入全局状态的位置得到未定义的类型，而不是从选择器中选择的值。我没有收到任何错误，但应该表示选择器值的字段为空。

我想从中获取状态的文件：

const FirstFile = () => {
  const [selectedValueRound, setSelectedValueRound] = useState("10 rounds");
  return (
    <View>
      <RoundContext.Provider
        value={[selectedValueRound, setSelectedValueRound]}
      >
        <View>
          <Picker
            selectedValue={selectedValueRound}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedValueRound(itemValue)
            }
          >
            <Picker.Item label="1 round" value="0"></Picker.Item>
            <Picker.Item label="2 rounds" value="1"></Picker.Item>
          </Picker>
        </View>
      </RoundContext.Provider>
    </View>
  );
};

上下文文件：

export const RoundContext = createContext(false);

我环绕上下文的导航文件

const Stack = createNativeStackNavigator();

const {selectedValueRound, setSelectedValueRound} = useContext(RoundContext);

const MyStack = () => {
  return (
    <RoundContext.Provider value={[selectedValueRound, setSelectedValueRound]}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="FirsFile" component={FirsFile} />
          <Stack.Screen name="SecondFile" component={SecondFile} />
        </Stack.Navigator>
      </NavigationContainer>
    </RoundContext.Provider>
  );
};

我尝试插入全局值的文件：

const SecondFile = () => {
  const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);

  return (
    <View>
      <Text>{selectedValueRound}</Text>
    </View>
  );
};
export default SomeFile;

Answer 1

您还需要定义上下文提供程序并将您的应用包装到其中。

export const RoundContextProvider = ({children}) => {
  const stateTuple = useState(false);
  return <RoundContext.Provider value={stateTuple}>{children}</RoundContext.Provider>;
}

<RoundContextProvider>
  <YourApp/>
</RoundContextProvider>

那么你就可以按照你在问题中描述的那样使用它了：const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);

Answer 2

您必须在顶部 parent 组件中声明 state 和上下文提供程序。 children 应该只使用上下文中的值。

parent 组件

const MyStack = () => {
  const [selectedValueRound, setSelectedValueRound] = useState("10 rounds");
  const contextValue = useMemo(
    () => [selectedValueRound, setSelectedValueRound], 
    [selectedValueRound]
  );

  return (
    <RoundContext.Provider value={contextValue}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="FirsFile" component={FirsFile} />
          <Stack.Screen name="SecondFile" component={SecondFile} />
        </Stack.Navigator>
      </NavigationContainer>
    </RoundContext.Provider>
  );
};

请注意，我使用 useMemo 来防止在 selectedValueRound 未更改时将新数组传递给上下文。

children

const FirstFile = () => {
  const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);

  return (
    <View>
      <View>
        <Picker
          selectedValue={selectedValueRound}
          onValueChange={itemValue => setSelectedValueRound(itemValue)}
        >
          <Picker.Item label="1 round" value="0"></Picker.Item>
          <Picker.Item label="2 rounds" value="1"></Picker.Item>
        </Picker>
      </View>
    </View>
  );
};

const SecondFile = () => {
  const [selectedValueRound] = useContext(RoundContext);

  return (
    <View>
      <Text>{selectedValueRound}</Text>
    </View>
  );
};

从使用 Context 配置的全局变量中仅获取未定义的值

Get only undefined value from my global variable configured with Context

javascript

reactjs

react-native