ReferenceError: Can't find variable: useState - React Native
ReferenceError: Can't find variable: useState - React Native
我一直在从 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
}
尝试删除 node_modules 目录和包 - lock.json 然后 运行 npm install
问题出在你的 React 版本上。您正在使用 "react": "16.13.1"
,但钩子是在 16.8
版本中引入的。更新您的 React 版本将解决问题。
请运行:
npm install react@latest react-dom@latest
我一直在从 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
}
尝试删除 node_modules 目录和包 - lock.json 然后 运行 npm install
问题出在你的 React 版本上。您正在使用 "react": "16.13.1"
,但钩子是在 16.8
版本中引入的。更新您的 React 版本将解决问题。
请运行:
npm install react@latest react-dom@latest