[英]Invalid attempt to destructure non-iterable instance - React Native
I am trying to authenticate a user using biometrics and pin on my app and I am trying to pass states to the PinSreen.我正在尝试使用生物识别技术对用户进行身份验证并固定在我的应用程序上,并且我正在尝试将状态传递给 PinSreen。 But I am getting an error
但我收到一个错误
Invalid attempt to destructure non-iterable instance.
解构不可迭代实例的无效尝试。 In order to be iterable, non-array objects must have a Symbol.iteratormethod.
为了可迭代,非数组对象必须有一个 Symbol.iterator 方法。
Here is my APP.js这是我的 APP.js
import { AuthContext } from './contexts/AuthContext';
const Stack = createStackNavigator();
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: "transparent",
},
};
const App = () => {
const [onboarded, setOnboarded] = useState(false);
const [authenticated, setAuthenticated] = useState(false);
useEffect(() => {
getStorage();
}, []);
const getStorage = async () => {
const onboarded = await AsyncStorage.getItem('@onboarded');
setOnboarded(JSON.parse(onboarded));
};
const [loaded] = useFonts({
SFBold: require("./assets/fonts/sf-bold.ttf"),
SFMedium: require("./assets/fonts/sf-medium.ttf"),
SFRegular: require("./assets/fonts/sf-regular.ttf"),
SFLight: require("./assets/fonts/sf-light.ttf"),
});
if (!loaded) return null;
return (
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
<NavigationContainer theme={theme} >
<Stack.Navigator initialRouteName={!onboarded ? 'Onboarding' : !authenticated ? 'PinScreen' : 'BottomBar'} screenOptions={{ headerShown: false }}>
<Stack.Screen name="BottomBar" component={BottomBar} />
<Stack.Screen name="PinScreen" component={PinScreen} />
<Stack.Screen name="Onboarding" component={Onboarding} />
<Stack.Screen name="CodeScanner" component={CodeScanner} />
<Stack.Screen name="SignUp" component={SignUp} />
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Group screenOptions={{ presentation: 'modal' }}>
<Stack.Screen name="Deposit" component={Deposit} />
<Stack.Screen name="Authorise" component={Authorise} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
);
}
export default App;
And here is my PinScreen where after the pin biometrics are input correctly, the setAuthenticated(true);
这是我的 PinScreen,在正确输入 pin 生物识别信息后,
setAuthenticated(true);
is set已设置
const PinScreen = () => {
const navigation = useNavigation();
const [pin, setPin] = useState('');
const [authenticated, setAuthenticated] = useContext(AuthContext);
const [isBiometricSupported, setIsBiometricSupported] = useState(false);
const [isPinSet, setIsPinSet] = useState(false);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => {
(async () => {
const compatible = await LocalAuthentication.hasHardwareAsync();
setIsBiometricSupported(compatible);
})();
});
const handleButtonPress = (value) => {
if (pin.length < 6) {
setPin(pin + value);
}
}
function onAuthenticate() {
LocalAuthentication.authenticateAsync().then(auth => {
if (auth.success) {
setAuthenticated(true);
setLoading(true);
setTimeout(() => {
navigation.navigate('BottomBar', { screen: 'Home' });
}, 800);
} else {
setError(true);
Vibration.vibrate(200);
}
});
}
Why am I getting the error.为什么我收到错误。 Why is it not working?
为什么它不起作用? Please help
请帮忙
When you're passing the authenticated
and setAuthenticated
to your AuthContext.Provider
, you pass it as a object {}
.当您将
authenticated
和setAuthenticated
传递给您的AuthContext.Provider
时,您将其作为 object {}
传递。
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
Then in your PinScreen
you try to desctructure it as a array []
然后在您的
PinScreen
中,您尝试将其解构为数组[]
const [authenticated, setAuthenticated] = useContext(AuthContext);
Instead you should destructure it as a object相反,您应该将其解构为 object
const { authenticated, setAuthenticated } = useContext(AuthContext);
Your error seems to be here in PinScreen.js:您的错误似乎在 PinScreen.js 中:
const [authenticated, setAuthenticated] = useContext(AuthContext);
You are trying to destructure an array that is actually an object.:您正在尝试解构一个实际上是 object 的数组:
<AuthContext.Provider value={{ signed: true, Login }}>
Try the following change in PinScreen.js:在 PinScreen.js 中尝试以下更改:
const { authenticated, setAuthenticated } = useContext(AuthContext);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.