如何将函数从类组件切换到函数组件答案

【问题标题】：How to switch a function from a class component to a function component如何将函数从类组件切换到函数组件
【发布时间】：2021-05-08 14:29:12
【问题描述】：

我曾经在 react-native 中使用类组件。我的新 app.js 文件如下所示：

import React, { useState, useEffect } from 'react';
import {Text} from 'react-native';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import Splash from './src/components/Splash';
import {MainStackNavigator, BottomTabNavigator} from './Navigation/StackNavigator';

export default function App() {

  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.allowFontScaling = false; 

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  if (loading) {
    return <Splash />;
  }

  return (
    <AppContext.Provider value={state}>
      <NavigationContainer>
        {!user.loggedIn ? (
          <MainStackNavigator />
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

如何添加我之前使用的组件，componentDidMount 或 componentWillMount？因为在这里我想添加这个，我有点迷茫：

  async UNSAFE_componentWillMount() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
  }

【问题讨论】：

标签： javascript react-native function class components

【解决方案1】：

你应该使用React.useEffect hook

像这样：

  async someFunction() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
  }
  //this will call at each render
  React.useEffect(() => {
    someFunction()
  });

警告：不要在 useEffect 本身中添加 async 关键字，否则会导致您的应用崩溃

【讨论】：

感谢您的帮助，'async' 在这种情况下不起作用，不是吗？
创建一个异步函数并在 useEffect 挂钩中调用该函数

【解决方案2】：

由于 componentWillMount 已从 React 最新版本中弃用，因此它可能无法正常工作。

我们可以将 componentWillMount 代码移动到 componentDidMount 以在没有任何 React 警告的情况下执行代码。

async componentDidMount() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
        i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
}

【讨论】：

感谢您的回答，我们可以在函数组件中这样使用它吗？
不，不在功能组件中，对于功能组件我们必须将代码移动到 useEffect React 钩子中。

【解决方案3】：

您的languageSetup 声明错误。如果你想要一个箭头函数，你需要这样做：

const languageSetup = async () => {
  //Your function code
}

或

async function languageSetup(){
  //Your function code
}
```.

【讨论】：

非常感谢！我真的很感激
我仍然有这个 vut 应用程序工作警告：useEffect 收到了一个不是数组的最终参数（相反，收到了object）。指定时，最后一个参数必须是一个数组。
不客气。试着把 useEffect 像这样：useEffect(()=>{// Your function code},[])

【解决方案4】：

非常感谢@Hassan Kandil 帮助我，照你说的做：

import React, { useState, useEffect } from 'react';
import {Text} from 'react-native';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import Splash from './src/components/Splash';
import {MainStackNavigator, BottomTabNavigator} from './Navigation/StackNavigator';
import {
  retrieveAppLang,
  userSessionActive
} from "./src/common/Preferences";

export default function App() {

  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.allowFontScaling = false; 

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  
   async languageSetUp() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("BottomTabNavigator");
    }
  }
 
  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, 
    languageSetUp();
  []);

  if (loading) {
    return <Splash />;
  }

  console.log(lang)

  return (
    <AppContext.Provider value={state}>
      <NavigationContainer>
        {!user.loggedIn ? (
          <MainStackNavigator />
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

得到我：

【讨论】：