解構不可迭代實例的無效嘗試 - 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);