Question

添加构造函数（props）时出现以下错误。这是什么错误，我该如何解决。是因为export default function LoginForm({navigation}){

代码在这里：

import React, { useState, useEffect, Component } from 'react';
import { StyleSheet, View, Text,TouchableOpacity,TextInput, ActivityIndicator,Linking } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialIcons } from '@expo/vector-icons';

import { sliderStyle } from '../styles/slider';
import { render } from 'react-dom';

export default function LoginForm({ navigation }){ 
     
     constructor(props){
        super(props)
        this.state={
            
        }
     }


    const pressHandler = () => {
        navigation.goBack();
    }
     
 
    return (
       <View style={sliderStyle.LoginPageContainer}>
          <Text>Hello React Native!</Text>
       </View>      
    );
}

Answer 1

构造函数是特定于类的，并且在功能组件中不可用。使用useState初始化功能组件中的状态。

供参考：https://reactjs.org/docs/hooks-state.html。

Answer 2

您必须将其更改为导出默认的Class而不是Function，因为不能在功能组件中使用构造函数，请尝试以下代码

import React, { useState, useEffect, Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  Linking,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { MaterialIcons } from "@expo/vector-icons";

import { sliderStyle } from "../styles/slider";
import { render } from "react-dom";

//const LoginForm = ({ navigation }) => {
import React, { useState, useEffect, Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  Linking,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { MaterialIcons } from "@expo/vector-icons";

import { sliderStyle } from "../styles/slider";
import { render } from "react-dom";

export default class LoginForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {};

  pressHandler = () => {
    navigation.goBack();
  };

  render() {
    return (
      <View style={sliderStyle.LoginPageContainer}>
        <Text>Hello React Native!</Text>
      </View>
    );
  }
}

：

Answer 3

如何在constructor中使用function？只需从function中删除构造函数即可。像这样

import React, { useState, useEffect, Component } from 'react';
import { StyleSheet, View, Text,TouchableOpacity,TextInput, ActivityIndicator,Linking } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialIcons } from '@expo/vector-icons';

import { sliderStyle } from '../styles/slider';
import { render } from 'react-dom';

export default function LoginForm({ navigation }){ 

    const pressHandler = () => {
        navigation.goBack();
    }
     
 
    return (
       <View style={sliderStyle.LoginPageContainer}>
          <Text>Hello React Native!</Text>
       </View>      
    );
}

其他使用带有class属性的构造函数。

当我添加构造函数（props）时反应本机给出错误

3 个答案: