TypeError：null 不是对象（评估 ''this.state.torchon'）

Posted 2023-03-11

【中文标题】TypeError：null 不是对象（评估 \'\'this.state.torchon\'）

【英文标题】：TypeError: null is not an object (evaluating ''this.state.torchon')TypeError：null 不是对象（评估 ''this.state.torchon'）

【发布时间】：2020-06-26 03:58:20

【问题描述】：

我不知道下面的代码做错了什么...我想在相机拍摄期间打开/关闭闪光灯，但我的代码不起作用，我尝试以不同的方式绑定状态但仍然不适合我...下面是我的代码。我需要有关如何使其正常工作的帮助。

import React,  Component  from 'react';
import  View, StyleSheet, Text, TouchableOpacity  from 'react-native';
import  RNCamera  from 'react-native-camera';
import RNFetchBlob from 'rn-fetch-blob';
import Icon from 'react-native-vector-icons/Ionicons';

class cameraComponent extends Component 

    toggleTorch()

    let tstate = this.state.torchon;
    if (tstate == RNCamera.Constants.FlashMode.off)
       tstate = RNCamera.Constants.FlashMode.torch;
     else 
       tstate = RNCamera.Constants.FlashMode.off;
    
    this.setState(torchon:tstate)


    takePicture = async () => 
        if(this.camera) 
            const options =  quality: 0.5, base64: true ;
            const data = await this.camera.takePictureAsync(options);
            console.log(data.base64)
            const path = `$RNFetchBlob.fs.dirs.CacheDir/test.png`;
            console.log('path', path)
            try 
                RNFetchBlob.fs.writeFile(path, data.base64, 'base64')
            
            catch(error) 
              console.log(error.message);
            
        
    ;
  render() 
    return (
      <View style=styles.container>
          <RNCamera
            ref = ref=>
                this.camera=ref;
            
            style=styles.preview
            flashMode=this.state.torchon
            // type = RNCamera.Constants.Type.back
            
          >

          </RNCamera>
          <View style= flex: 0, flexDirection: 'row', justifyContent: 'center' >
              <TouchableOpacity onPress=this.takePicture.bind(this) style=styles.captureBtn />
          </View>

          <TouchableOpacity style=styles.toggleTorch  onPress=this.toggleTorch.bind(this)>
                 this.state.torchon == RNCamera.Constants.FlashMode.off? (
                        <Image style=styles.iconbutton source=require('../images/flashOff.png') />
                    ) : (
                        <Image style=styles.iconbutton source=require('../images/flashOn.png') />
                    )
                
            </TouchableOpacity>


          
      </View>
    );
  ;

export default cameraComponent;

【问题讨论】：

this.state.torchon 的初始值是多少？

【参考方案1】：

您尚未在任何地方初始化状态，当您访问 this.state.torchon 时，它会抛出错误，因为 this.state 为空。 你必须初始化状态。

class cameraComponent extends Component 
    this.state= torchon:RNCamera.Constants.FlashMode.off ;
    toggleTorch=()=>
    
      let tstate = this.state.torchon;
      if (tstate == RNCamera.Constants.FlashMode.off)
         tstate = RNCamera.Constants.FlashMode.torch;
       else 
        tstate = RNCamera.Constants.FlashMode.off;
      
      this.setState(torchon:tstate)
   

您也可以在构造函数中初始化状态。