出错 -> Hooks 只能在函数组件的主体内调用。在运行 React Native Web 项目时答案

【问题标题】：getting error -> Hooks can only be called inside the body of a function component. while running a react native web project出错 -> Hooks 只能在函数组件的主体内调用。在运行 React Native Web 项目时
【发布时间】：2021-02-15 05:51:44
【问题描述】：

我正在尝试运行一个 react-native-web 项目，当我尝试运行它时，我收到以下错误

当我进行堆栈跟踪时，我发现我的错误完全发生在以下代码中

import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  KeyboardAvoidingView,
  TextInput,
  View,
  Text,
  Image,
  Button,
  TouchableOpacity,
} from 'react-native';
import qs from 'qs';
import {Images} from '../../assets';
import {API} from '../../api';
import {disabledColor, successColor} from '../../config/colors';
    export default function LoginScreenWeb(props) {
      const {navigation} = props;
      const [firstName, setFirstName] = useState('');
      const [mobile, setMobile] = useState('');
      const [width, getWidth] = useState(null);
      const SetWidth = () => {
        getWidth(window.screen.availWidth);
      };
    
      // useEffect(() => {
      //   // SetWidth();
      //   // setInterval(SetWidth, 1000);
      // }, []);
    
      // const onHandlePress = () => {
      //   async function post() {
      //     try {
      //       const response = await API.postFormData(
      //         `/users/signup`,
      //         qs.stringify({
      //           firstName,
      //           mobile,
      //         }),
      //       );
      //       navigation.navigate('otp');
      //       localStorage.setItem('mobile', mobile);
      //       console.log('loginRes--', response);
      //     } catch (e) {
      //       console.log(e);
      //     }
      //   }
      //   post();
      // };
    
      return (
        <SafeAreaView style={styles.container}>
          <View
            // style={
            //   width > 414 ? styles.inner_container_web : styles.inner_container_mob
            // }
            >
            <Image
              source={Images.login_web}
              // style={width > 414 ? styles.image_web : styles.image_mob}
            />
            <KeyboardAvoidingView>
              <View style={{padding: 16}}>
                <Text style={styles.textLabel}>Name</Text>
                <TextInput
                  placeholder="Enter your name"
                  style={styles.textInput}
                  // value={firstName}
                  // onChangeText={(firstName) =>
                  //   setFirstName(firstName.replace(/[^A-Za-z]/g, ''))
                  // }
                />
                <Text style={styles.textLabel}>+91</Text>
                <TextInput
                  placeholder="Enter your phone number"
                  style={styles.textInput}
                  maxLength={10}
                  keyboardType="number-pad"
                  // value={mobile}
                  // onChangeText={(mobile) =>
                  //   setMobile(mobile.replace(/[^0-9]/g, ''))
                  // }
                />
                <View style={{alignItems: 'center'}}>
                  {/* {firstName && mobile.length === 10 ? ( */}
                    <TouchableOpacity
                      // onPress={() => onHandlePress()}
                      style={styles.enable_continue}>
                      <Text style={styles.continue}>Continue</Text>
                    </TouchableOpacity>
                  {/* ) : ( */}
                    <TouchableOpacity style={styles.disble_continue}>
                      <Text style={styles.continue}>Continue</Text>
                    </TouchableOpacity>
                  {/* )} */}
                </View>
                <View style={{flexDirection: 'row'}}>
                  <View style={styles.cookies} />
                  <Text style={{fontSize: '12px'}}>
                    By continuing you agree to the Terms of Service and Privacy
                    policy
                  </Text>
                </View>
              </View>
            </KeyboardAvoidingView>
          </View>
        </SafeAreaView>
      );
    }

一旦我取消注释 useeffect 部分，我就会得到 Hooks 只能在函数组件的主体内调用。错误但是我在这里使用了一个功能组件。

我不知道如何解决这个错误，有人可以在这里帮助我吗，提前谢谢，如果需要任何其他内容来说明清楚，请告诉我

堆栈跟踪->

【问题讨论】：

我在这里看不到任何钩子导入，我不建议复制您的所有源代码（最小，完整示例）。但是，您的屏幕截图中没有显示更多的堆栈跟踪。我建议查看堆栈跟踪以找出哪个组件触发了错误。
这种情况经常发生在我们在组件外使用react hooks的时候。
@stealththeninja 我已经编辑了这个问题，请您检查一下
将您的 LoginScreenWeb 导入添加到问题中。有时可能是导入错误
@AakashRajni 添加了

标签： reactjs react-native react-native-android react-native-ios react-native-web

【解决方案1】：

也试试这个：

const LoginScreenWeb= (props) => {//////another code}
export default LoginScreenWeb

还要检查您正在使用的版本（反应）.. React 16.8

中提供了 React Hooks

【讨论】：

你使用的是什么版本？

【解决方案2】：

这是 npm 链接和版本不匹配的错误，一旦我链接了我的 react 包，错误就得到了修复

【讨论】：