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

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()}

以便您可以访问类上下文。