Wo kann ich meine Funktion implementieren, wenn ich Map for Iteration verwende?

Question

Um Ansichten dynamisch vom Array zu iterieren und hinzuzufügen, verwende ich folgenden Code.

export default class CreateFeedPost extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedImages: ["1", "2", "3"] 
    }; 
    } 

    render() { 
    let animation = {}; 
    let color = Platform.OS === "android" 
     ? styleUtils.androidSpinnerColor 
     : "gray"; 
    return (
     <View style={{ flex: 1, flexDirection: "column" }}> 
     <View style={styles.topView}> 
      <View style={styles.closeButtonView}> 
      <TouchableHighlight 
       underlayColor="transparent" 
       style={styles.closeButton} 
       onPress={this._closeButtonClicked.bind(this)} 
      > 
       <Icon name="times" color="#4A4A4A" size={20} /> 
      </TouchableHighlight> 
      </View> 
      <View style={styles.postButtonView}> 
      <TouchableHighlight 
       underlayColor="transparent" 
       style={styles.postButton} 
       onPress={this._postButtonClicked.bind(this)} 
      > 
       <Text style={styles.postButtonText}>Post</Text> 
      </TouchableHighlight> 
      </View> 
     </View> 
     <View style={styles.profileContainer}> 
      <View style={{ width: 65, height: 65, padding: 10 }}> 
      <Image 
       source={{ uri: global.currentUser.USER_PROFILE_PIC }} 
       style={styles.profileImage} 
      /> 
      </View> 
      <View style={[styles.middleTextView]}> 
      <Text style={[styles.memberName]}> 
       {global.currentUser.USER_NAME} 
      </Text> 
      </View> 
     </View> 
     <Animated.ScrollView 
      style={{ flex: 1 }} 
      scrollEventThrottle={1} 
      showsVerticalScrollIndicator={false} 
      {...animation} 
     > 
      <View> 
      <TextInput 
       ref="postTextInputRef" 
       placeholder="So, What's up?" 
       multiline={true} 
       autoFocus={true} 
       returnKeyType="done" 
       blurOnSubmit={true} 
       style={styles.textInput} 
       onChangeText={text => this.setState({ text })} 
       value={this.state.text} 
       onSubmitEditing={event => { 
       if (event.nativeEvent.text) { 
        this._sendCommentToServer(event.nativeEvent.text); 
        this.refs.CommentTextInputRef.setNativeProps({ text: "" }); 
       } 
       }} 
      /> 
      </View> 
     </Animated.ScrollView> 
     <KeyboardAvoidingView behavior="padding"> 
      <ScrollView 
      ref={scrollView => { 
       this.scrollView = scrollView; 
      }} 
      style={styles.imagesScrollView} 
      horizontal={true} 
      directionalLockEnabled={false} 
      showsHorizontalScrollIndicator={false} 
      decelerationRate={0} 
      snapToInterval={100} 
      snapToAlignment={"start"} 
      contentInset={{ 
       top: 0, 
       left: 0, 
       bottom: 0, 
       right: 0 
      }} 
      > 

      {this.state.selectedImages.map(function(name, index) { 
       return (
       <View style={styles.imageTile} key={index}> 
        <View style={styles.imageView}> 
        <TouchableHighlight 
         underlayColor="transparent" 
         style={styles.imageRemoveButton} 
         onPress={() => this._imageRemoveButtonClicked.bind(this)} 
        > 
         <Icon name="times" color="#4A4A4A" size={20} /> 
        </TouchableHighlight> 
        </View> 
       </View> 
      ); 
      })} 
      </ScrollView> 

      <TouchableHighlight 
      underlayColor="transparent" 
      style={styles.cameraButton} 
      onPress={this._cameraButtonClicked.bind(this)} 
      > 
      <View style={styles.cameraButtonView}> 
       <Icon name="camera" color="#4A4A4A" size={20} /> 
       <Text style={styles.cameraButtonText}>Add Pic</Text> 
      </View> 
      </TouchableHighlight> 
     </KeyboardAvoidingView> 
     </View> 
    ); 
    } 

    _closeButtonClicked() { 
    this.props.navigator.pop(); 
    } 

    _postButtonClicked() {} 

    _cameraButtonClicked() { 
    this.props.navigator.push({ 
     title: "All Photos", 
     id: "photoBrowser", 
     params: { 
     limit: 3, 
     selectedImages: this.state.selectedImages 
     } 
    }); 
    } 

    _imageRemoveButtonClicked() { 
    console.log("yes do it"); 
    } 
} 

Ich lade Code in der Render-Methode. Wenn ich die Funktion imageRemoveButtonClicked außerhalb render-Methode schreibe, gibt es eine Fehlermeldung, die besagt, dass 'Eigenschaft Bindung von undefined' nicht lesen kann. Ich weiß nicht, was ich machen soll. Kann mir bitte jemand dabei helfen?

Answer 1

Ich glaube, das Problem ist, dass Sie nicht einen Pfeil Funktion als Argument für this.state.selectedImages.map() verwenden. Wenn Sie innerhalb einer inneren Funktion auf this zugreifen möchten, sollten Sie die Pfeilfunktionssyntax verwenden. Die Standardsyntax erfasst this nicht.

this.state.selectedImages.map((name, index) => { 
    return (...); 
}) 

Answer 2

Verwenden Sie Pfeilfunktionen und Klasseneigenschaften. Für weitere Informationen über Bindungsmuster lesen Sie article. Versuchen Sie, Ihre Methode als hinzuzufügen:

export class App extends Component { 
yourMapFunction =() => { 
    yourCode... 
} 
}