React Native конструктор: неожиданный токен, ожидается ";"

Question

Я очень новичок в реакции на нативную, у меня возникла проблема с синтаксической ошибкой, я даю свое приложение. 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

Реактивные функции (функциональные компоненты) не имеют ни 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>