React Native Hook in Class 将函数转换为未定义的类变量答案

【问题标题】：React Native Hook in Class converting function to class variable undefinedReact Native Hook in Class 将函数转换为未定义的类变量
【发布时间】：2020-03-24 00:08:01
【问题描述】：

我们正在尝试将 react 原生函数转换为一个类，以便我们可以包含将与 Firebase 实时数据库一起使用的状态管理。我们刚刚意识到您不能在课堂上使用 Hook，因此希望获得一些关于最适合情况的替代方案的指导。该应用程序是一个简单的相机，可让您录制和发布视频。

这是函数中的原始代码（作品）sn-p。 const 类型被贴花并使用钩子 useEffect。我们需要一个在课堂上有效的替代方案。

export function App({ navigation }) {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraRef, setCameraRef] = useState(null)
  const [recording, setRecording] = useState(false)

  //type uses hooks declared HERE
  const [type, setType] = useState(Camera.Constants.Type.back); useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();

这是我们正在做的事情：

export class App extends Component {

  state = {
    hasPermission: null,
    cameraRef: null,
    recording: false,
    type: Camera.Constants.Type.back //can not find variable type HERE
  };

  componentDidMount() {

    async () => {
      status = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');

    }, []; if (hasPermission === null) {
      return <View />;
    }
    if (hasPermission === false) {
      return <Text>No access to camera</Text>;
    }

  }

感谢您的任何帮助，谢谢。

【问题讨论】：

标签： javascript reactjs react-native expo react-state-management

【解决方案1】：

试试这个

export class App extends Component {

 state = {
      hasPermission: null,
      cameraRef: null,
      recording: false,
      type: Camera.Constants.Type.back //can not find variable type HERE
 };

 async componentDidMount() {

      status = await Camera.requestPermissionsAsync();
      this.setState({
           hasPermission: 'granted'
      });

      if (this.state.hasPermission === null) {
           return <View />;
      }
      if (this.state.hasPermission === false) {
           return <Text>No access to camera</Text>;
      }

 }

}

【讨论】：