反应本机构造函数:意料之外的标记，预期；

Question

我是新的反应本机，我面临一些关于语法错误的问题，我在这里给我的app.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default function App() {
  state ={
   loaded:false
  }
  constructor() {
   super();
   MainService.load(v =>this.setState({loaded:true}));
  }

  return (
    <View style={styles.container}>
      {this.state.loaded ? <Text>Open up App.js to start working on your app!</Text> : <Text> Loading..</Text>}
    </View>
  );
}

在constructor() {的这一行中发生的错误，表示构造函数丢失了一个错误，

TransformError SyntaxError: C:\Users\Zeed Tanue\Desktop\Skills\vue-native\React\deleteLater\App.js: Unexpected token, expected ";" (9:16)

   7 |     loaded:false
   8 |   }

>  9 |   constructor() {
     |                 ^
  10 |     super();
  11 |     MainService.load(v =>this.setState({loaded:true}));
  12 |   }

我已经做了一些研究，但没有找到任何解决方案，这是正确的方法，在每一个解决方案，因此我有错误。你能帮我解决这个问题吗?为什么会这样？

Answer 1

React函数(功能组件)没有constructor，也没有this，它们是不存在的。您可以使用useState和useEffect挂钩来提供状态和组件生命周期的感觉。

import React, { useEffect, useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default function App() {
  const [loaded, setLoaded] = useState(false); // provide initial false state

  useEffect(() => {
    MainService.load(v => setLoaded(true));
  }, []); // empty dependency array analogous to componentDidMount

  return (
    <View style={styles.container}>
      {loaded ? (
        <Text>Open up App.js to start working on your app!</Text>
      ) : (
        <Text>Loading...</Text>}
      )
    </View>
  );
}

如果您想使它成为一个基于类的组件，那么下面是您遇到的问题。不能在构造函数中调用setState，因此需要在生命周期函数中调用MainService，比如componentDidMount。此外，呈现的JSX需要在render生命周期函数中返回。

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default class App extends Component {
  constructor() {
    super();
    this.state ={
      loaded:false
    }
  }

  componentDidMount() {
    MainService.load(v =>this.setState({loaded:true}));
  }

  render() {
    const { loaded } = this.state;
    return (
      <View style={styles.container}>
        {loaded ? (
          <Text>Open up App.js to start working on your app!</Text>
        ) : (
          <Text>Loading...</Text>}
        )
      </View>
    );
  }
}

Answer 2

不要尝试这个-尝试接受的答案而不是

试试这个吧。有关解释，请参见代码注释。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default function App() {
  constructor(props) { // Must accept props arg
   super(props); // Must pass props to super()
   this.state = { // If you define a constructor, any initial state you have should be defined within the constructor
     loaded: false
   }
   MainService.load(v =>this.setState({loaded:true}));
  }

return (
 <View style={styles.container}>
  {this.state.loaded ? <Text>Open up App.js to start working on your app!</Text> : <Text> Loading..</Text>}
</View>