解构不可迭代实例的无效尝试 - React Native

Question

我正在尝试使用生物识别技术对用户进行身份验证并固定在我的应用程序上，并且我正在尝试将状态传递给 PinSreen。 但我收到一个错误

解构不可迭代实例的无效尝试。 为了可迭代，非数组对象必须有一个 Symbol.iterator 方法。

这是我的 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;

这是我的 PinScreen，在正确输入 pin 生物识别信息后， setAuthenticated(true); 已设置

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);
            }
        });
    }

为什么我收到错误。 为什么它不起作用？ 请帮忙

Answer 1

当您将authenticated和setAuthenticated传递给您的AuthContext.Provider时，您将其作为 object {}传递。

<AuthContext.Provider value={{ authenticated, setAuthenticated }}>

然后在您的PinScreen中，您尝试将其解构为数组[]

const [authenticated, setAuthenticated] = useContext(AuthContext);

相反，您应该将其解构为 object

const { authenticated, setAuthenticated } = useContext(AuthContext);

Answer 2

您的错误似乎在 PinScreen.js 中：

const [authenticated, setAuthenticated] = useContext(AuthContext);

您正在尝试解构一个实际上是 object 的数组：

<AuthContext.Provider value={{ signed: true, Login }}>

在 PinScreen.js 中尝试以下更改：

const { authenticated, setAuthenticated } = useContext(AuthContext);