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

Posted 2023-02-23

【中文标题】如何将函数从类组件切换到函数组件

【英文标题】：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");
    
  

【参考方案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>
  );
 

得到我：