ReferenceError：找不到变量：useState - React Native

Question

我一直在从 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
}

Answer 1

问题出在您的 React 版本中。您正在使用"react": "16.13.1"，但在16.8 版本中引入了挂钩。更新您的 React 版本将解决问题。

请运行：

npm install react@latest react-dom@latest

Answer 2

尝试删除 node_modules 目录和 package-lock.json 然后运行npm install