Блог

Я разрабатывал образец мобильного приложения из React native, и я продолжаю получать следующую ошибку, но, похоже, я не могу понять, что там не так.

В строке не отображается никаких ошибок, и сведения в журнале также не указывают на то, что меня должно беспокоить. Но я продолжаю получать эту ошибку.

 ReferenceError: Can't find variable: useState

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
 

Моя App.js внешность выглядит следующим образом

 import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import React, { useState } from "react";

import useFonts from "./hooks/useFonts";
import TravelPartner from "./src/components/mainPage";

const App = () => {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <View styles={styles.container}>
      {<Text>test run for the application</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;
 

Все библиотеки были установлены, и все в актуальном состоянии.
useFonts.js выглядит следующим образом

 import * as Font from "expo-font";

export default useFonts = async () => {
  await Font.loadAsync({
    "OtomanopeeOne-Regular": require("../src/assets/fonts/OtomanopeeOne-Regular.ttf"),
    "VeganStylePersonalUse-5Y58": require("../src/assets/fonts/VeganStylePersonalUse-5Y58.ttf"),
    "Festive-Regular": require("../src/assets/fonts/Festive-Regular.ttf"),
    "Pacifico-Regular": require("../src/assets/fonts/Pacifico-Regular.ttf"),
  });
};
 

Это мой package.json :

 {
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.1",
    "@react-navigation/stack": "^6.0.1",
    "expo": "~42.0.1",
    "expo-app-loading": "^1.1.2",
    "expo-font": "~9.2.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}
 

Проблема в вашей версии React. Вы используете "react": "16.13.1" , но крючки представлены в 16.8 версии. Обновление вашей версии React решит проблему.

Пожалуйста, беги:

 npm install react@latest react-dom@latest
 

попробуйте удалить каталог node_modules и package-lock.json, а затем запустите npm install