反应本机保存图像为状态不起作用

Question

首先，我正在使用Image Picker获取图像并将RNFetchBlob发送到API中。 我的问题是我有一些文本输入，最后按下一个按钮，我想同时发送此输入和图像。 为此，我尝试将图像uri保存为状态以在以后发送。 但是出现_this2.setState不是一个函数。 目前，我不知道如何解决。

这是我的简化代码。

class Create extends Component{

  constructor(props){
    super(props);
    this.state = {
      foto: '',
    }     
  }

openImagePicker(){
  const options = {
    title: 'Select Avatar',
     storageOptions: {
      skipBackup: true,
      path: 'images'
                     }
  }

  ImagePicker.showImagePicker(options, (imagen) =>{
      if (imagen.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (imagen.error) {
    console.log('ImagePicker Error: ', imagen.error);
  }
  else if (imagen.customButton) {
    console.log('User tapped custom button: ', imagen.customButton);
  }
  else {
    let source = { uri: imagen.uri };
    console.log(source.uri);
    this.setState({
        foto: source.uri
      })    
 }

render(){
        return(     
    <Container>
        <Header><Title>Eat</Title></Header>
        <Content>
            <Text>Título</Text>
            <View>
              <TextInput  
                onChangeText={(text) => this.titulo = text}   
              />
            </View>
            <Text>Personas</Text>
            <View style={styles.container}>
              <TextInput               
                type="number" 
                onChangeText={(text) => this.personas = text}   
              />
            </View>
            <Text>Foto</Text>
            <View>
            <TouchableOpacity activeOpacity={.8} onPress={this.openImagePicker}>
                <View>
                  <Text>Cambiar</Text>
                </View>
            </TouchableOpacity>
            </View>
            <View>
            <ScrollView >
            <TouchableHighlight onPress={(this._create.bind(this))}>
                <Text>Crear Receta</Text>
            </TouchableHighlight>
            </ScrollView>
            </View>
        </Content>
    </Container>
                )
    }

_create () {


 RNFetchBlob.fetch('POST', 'XXXXXXXXXXXX', {
    'Content-Type' : 'multipart/form-data',
    },
   [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'file', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(source.uri)},
    { name : 'info', data : JSON.stringify({
      "titulo": this.titulo,
      "personas": this.personas,
    })} 
  ]).then((resp) => {   
    console.log("ok");
  }).catch((err) => {
    console.log(err);
  })
    }
  })
  }

}

Answer 1

您可以绑定方法openImagePicker或这样调用它：

onPress={() => this.openImagePicker()}

这样您就可以访问您的类上下文。