Question

我试图上传我已经编码过的64位图像，但似乎并没有将状态保存到应用中，因此我可以将图像上传到我的服务器。状态似乎只保存在函数内，而不是整个组件。关于我做错了什么的任何建议？

  _selectImage(uri) {
    NativeModules.ReadImageData.readImage(uri, (image) => {
        this.state = {
            selected: image
        };

        console.log(this.state)
    });
}


render() {
return (
  <View style={styles.container}>
   <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }}>
      <TouchableOpacity style={ styles.button } onPress={ this._addImage.bind( this ) }>
        <Text>Add Image</Text>
      </TouchableOpacity>
      <TouchableOpacity style={ styles.button } onPress={this._uploadImage} >
        <Text>Upload Image</Text>
      </TouchableOpacity>
    </View>

    <ScrollView style={styles.container}>
      <View style={styles.imageGrid}>
        { this.state.images.map((image) => {
          return (
            <TouchableHighlight onPress={this._selectImage.bind(null, image.uri)}>
              <Image key={ _generateUUID() } style={styles.image} source={{ uri: image.uri }} />
            </TouchableHighlight>
          );
        })
      }
      </View>
    </ScrollView>
  </View>
);

} };

Answer 1

首先，构造函数中的 this-bind 你的_selectImage方法。然后使用＆＃34; setState＆＃34;而不是this.state = {...}

您只需要创建一次状态对象，最好是构造函数。然后使用setState代替进一步修改。

  constructor(props) {
      super(props);
      this.state = {selected: null};
      this._selectImage = this._selectImage.bind(this);
  }

  _selectImage(uri) {
    NativeModules.ReadImageData.readImage(uri, (image) => {
        this.setState({
            selected: image
        });

        console.log(this.state)
    });
}

React Native with Redux-正确更新状态的问题

1 个答案: