Intento usar el contexto para acceder al estado globalmente pero obtengo el siguiente error:
TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.Traté de resolver el problema adaptando el uso del contexto de esta pregunta de desbordamiento de pila .
Archivo del que quiero obtener el estado:
const test = () => { 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 para el contexto:
export const RoundContext = createContext(false);Archivo donde trato de llamar al contexto y aparece el error:
const SomeFile = () => { const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext); return ( <View> <Text>{selectedValueRound}</Text> </View> ); }; export default SomeFile;Para que esto funcione, asegúrese de envolver SomeFile dentro de RoundContext.Provider , ya que por ahora parece que no lo está haciendo.
Solo los componentes envueltos dentro del proveedor pueden consumir el contexto.
Además, asegúrese de que cada componente de React comience con una letra mayúscula, Test en lugar de test
const Test = () => { 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> <SomeFile/> </RoundContext.Provider> </View> ); };