反应原生相机胶卷“null不是对象（评估'this.state.photos'）”答案

【问题标题】：react-native camera roll "null is not an object (evaluating 'this.state.photos')"反应原生相机胶卷“null不是对象（评估'this.state.photos'）”
【发布时间】：2019-01-23 08:03:05
【问题描述】：

所以我正在尝试将相机胶卷功能添加到我的相机胶卷演示应用程序中，但我不断收到此错误。 “null 不是对象（评估 'this.state.photos'）” iOS Error Message 请注意：我是一个非常新的开发人员，这是我的第一个 react-native 应用程序。任何帮助将不胜感激。

下面是我的 index.ios.js 文件的内容。

//index.ios.js


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Dimensions,
    View,
    TouchableOpacity,
    Image,
    CameraRoll,
    ScrollView,
    Button,
} from 'react-native';


import Camera from 'react-native-camera';
import { createStackNavigator } from 'react-navigation'

export default class MyCamera extends Component {
    render() {

        return (

            <View style={styles.container}>

                <Camera
                    ref={(cam) => {
                        this.camera = cam;
                    }}
                    style={styles.preview}
                    aspect={Camera.constants.Aspect.fill}>

                    <TouchableOpacity style={styles.button} onPress={this.takePicture.bind(this)}>
                        <Image source={require("./resources/images/shutter_button.png")}/>
                    </TouchableOpacity>

                </Camera>

                <Button title="Load Images" onPress={this._handleButtonPress}/>


                {this.state.photos.map((p, i) => {
                    <Image
                        key={i}
                        style={{
                            width: 300,
                            height: 100,
                        }}
                        source={{uri: p.node.image.uri}}
                    /> // Closing IMG Tag

                })}

            </View>
        ); //Closing Return 
    } //Closing Render 

    takePicture() {
        this.camera.capture()
            .then((data) => console.log(data))
            .catch(err => console.error(err));
    }// Closing takePicture

    _handleButtonPress = () => {
        CameraRoll.getPhotos({
            first: 20,
            assetType: 'Photos',
        })
            .then(r => {
                this.setState({photos: r.edges});
            })
            .catch((err) => {
                //Error Loading Images
            });
    }; //Closing handleButtonPress

};// Closing MyCamera

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 10,
        color: '#000',
        paddingRight: 20,
        margin: 40
    }
});

AppRegistry.registerComponent('MyCamera', () => MyCamera);

【问题讨论】：

标签： javascript ios reactjs react-native camera

【解决方案1】：

photos 值仅在您按下Load Images 按钮后设置，这意味着在此之前，this.state.photos 是undefined，为了解决这个问题，您可以执行以下操作：

{!!this.state.photos && this.state.photos.map((p, i) => {
      <Image
          key={i}
          style={{
              width: 300,
              height: 100,
           }}
           source={{uri: p.node.image.uri}}
     /> // Closing IMG Tag

})}

!! 只是将 truthy 值转换为 true 并将 falsy 值转换为 false，这意味着当 this.state.photos 是 undefined 时，@ 987654331@ 语句未评估（防止错误）。

【讨论】：

【解决方案2】：

在 MyCameraClass' 中你应该添加

  constructor(){
  super();

  this.state={
    photos: []
  }

}

渲染前

【讨论】：

【解决方案3】：

状态的第一个值为 null，因此您已将其设置为对象。

// like a property of your class
state = {
    photos: []
};

// or in constructor 
constructor(props) {
    super(props);

    this.state = { photos: [] };
}

【讨论】：