使用this.setState()时无法访问React-native受保护的成员

时间:2018-01-23 03:54:18

标签: react-native protected setstate

我是新来的本地人。请帮忙解决这个问题。我哪里错了?请指出并纠正我..非常感谢你

import React, {Component} from 'react';
import {Alert,View,Image} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import {Button} from "../components/common";

class ImageSelect extends Component {
    constructor(props) {
        super(props);
    }

    state = {
        ImageSource: null,
        imageBase: null,
        whichScreen: null,
    };


    showPicker() {
        const options = {
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true,
                path: 'images'
            }
        };

        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = {uri: response.uri};

                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };

                Alert.alert(source);
                this.setState({
                    imageSource: source
                });
            }
        });
    };

    showAlert(){
        Alert.alert("Picked");
    }

    render() {
        return (
            <View>
                <Button
                    buttonText={"Pick"}
                    onPress={this.showPicker.bind(this)}
                />
                <Image
                    source={this.state.imageSource}
                    style={{width: 50, height: 50,}}
                />
            </View>
        );
    }
}

export default ImageSelect;

我想使用现有的库Image Picker来选择图像..我需要将源保存到状态,但它说受保护的成员无法访问。请指出我错在哪里?

1 个答案:

答案 0 :(得分:1)

你必须在构造函数中声明状态变量。

constructor(props) {
super(props);
this.showPicker = this.showPicker.bind(this);
this.state = {
  imageSource : null,
}
}

Button内的onPress {}方法也是空的,你需要在onPress {}内调用showPicker()函数,如果你想调用它的话。