Tengo una aplicación React Native con dos páginas. En la primera página tengo un selector del que necesito los datos en la segunda página. Intento usar Contexto para hacer que el estado esté disponible globalmente, pero no lo hice funcionar hasta ahora porque solo obtengo tipos indefinidos en la posición donde quiero insertar el estado global y no el valor que se seleccionó del selector. No obtengo ningún error, pero el campo donde se debe representar el valor del selector está vacío.
Archivo del que quiero obtener el estado:
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> ); };Archivo de contexto:
export const RoundContext = createContext(false);Archivo de navegación donde envuelvo mi contexto
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> ); };Archivo donde trato de insertar el valor global:
const SecondFile = () => { const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext); return ( <View> <Text>{selectedValueRound}</Text> </View> ); }; export default SomeFile;También debe definir el proveedor de contexto y envolver su aplicación en él.
export const RoundContextProvider = ({children}) => { const stateTuple = useState(false); return <RoundContext.Provider value={stateTuple}>{children}</RoundContext.Provider>; } <RoundContextProvider> <YourApp/> </RoundContextProvider> luego puede usarlo como lo describió en la pregunta: const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);
Debe declarar el state y el proveedor de contexto en el componente principal superior. Los niños solo deben consumir los valores del contexto.
El componente padre
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> ); }; Tenga en cuenta que utilicé useMemo para evitar pasar una nueva matriz al contexto cuando selectedValueRound no cambió.
Los niños
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> ); };