Question

与react-native一起，我想不使用类就使用componentWillMount

  await Font.loadAsync({
    gotham_medium: require("../../assets/GothamMedium_1.ttf")
  });
}

const Button = (props: TouchableOpacityProps & ButtonProps) => (
  <TouchableOpacity {...props} style={styles.button}>
    <Text style={styles.title}>{props.title}</Text>
  </TouchableOpacity>
);

export default Button;

但是我在设备上有问题： error on the device

Answer 1

它说问题出在这行上（是）：

async componentWillMount = () => {

当您使用异步功能时，async关键字就在() =>之前（香草js语法错误）。像这样：

componentWillMount = async () => {

但是，这不是主要问题。不使用类时，需要使用useEffect钩子。因此，尝试执行以下操作（整个组件，然后删除componentWillMount）：

const Button = (props: TouchableOpacityProps & ButtonProps) => {
  useEffect(async () => {
    await Font.loadAsync({
      gotham_medium: require("../../assets/GothamMedium_1.ttf")
    });
  }, []);
  return (
    <TouchableOpacity {...props} style={styles.button}>
      <Text style={styles.title}>{props.title}</Text>
    </TouchableOpacity>
  );
};

在文件顶部：

import { useEffect } from 'react';

Answer 2

您可以为此使用钩子

来自docs，

如果您熟悉React类的生命周期方法，可以将useEffect钩子视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

和

如果要运行效果并仅将其清理一次（在挂载和卸载时），则可以将空数组（[]）作为第二个参数传递。这告诉React，您的效果不依赖于道具或状态的任何值，因此它不需要重新运行。这不是特殊情况，它直接取决于依赖项数组始终如何工作。

useEffect(async () => {
  await Font.loadAsync({
     gotham_medium: require("../../assets/GothamMedium_1.ttf")
  });
},[]);

在不使用类的情况下使用componentWillMount

2 个答案: