Question

因此，我试图将相机胶卷功能添加到我的相机胶卷演示应用程序中，但我一直收到此错误。 “ 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);

Answer 1

在MyCameraClass'中，您应该添加

  constructor(){
  super();

  this.state={
    photos: []
  }

}

渲染前

Answer 2

只有在您按下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，将 fassy 值转换为false，这意味着当{{1} }为this.state.photos，则不评估undefined语句（可防止错误）。

Answer 3

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

                    "columns": [                       
                       {

                            "targets": [0], "data": "TemplateId", "render": function (data, type, full)
                            {
                                return '@Html.ActionLink("View", "View", new {id = "TemplateId" })'.replace("TemplateId", data);

                            },
                            "targets": [0], "data": "TemplateId", "render": function (data, type, full)
                            {
                                return '@Html.ActionLink("Update", "Update", new {id = "TemplateId" })'.replace("TemplateId", data);
                            },
                             "targets": [0], "data": "TemplateId", "render": function (data, type, full)
                             {
                                 return '@Html.ActionLink("Delete", "Delete", new {id = "TemplateId" })'.replace("TemplateId", data);
                             }
                        },
                        { "title": "Template Id", "data": "TemplateId", "name": "TemplateId", "autoWidth": true },
                        { "title": "Team Name", "data": "TeamName", "name": "TeamName", "autoWidth": true },
                        { "title": "Template Name", "data": "TemplateName", "name": "TemplateName", "autoWidth": true },
                        { "title": "Description", "data": "Description", "name": "Description", "autoWidth": true },

                    ],
                    "lengthMenu": [[100, 50, 80], [100, 50, 80]],
                });
           }
        }
        // initialize the datatables 
        enabletemplateListVM.init();
    });
  </script

react-native相机胶卷“ null不是对象（正在评估'this.state.photos'）”

3 个答案: