在使用map進行迭代時，在哪裏實現我的函數？

Question

要從數組中動態地迭代和添加視圖，我使用下面的代碼。

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"); 
    } 
} 

我在渲染方法中加載代碼。如果我編寫函數imageRemoveButtonClicked外部渲染方法，它給出了一個錯誤，說'無法讀取未定義'的屬性綁定。不知道該怎麼做。有人可以幫助我。

Answer 1

我認爲，問題是，你是不是用箭頭函數作爲參數傳遞給this.state.selectedImages.map()。如果您想在內部函數中訪問this，則應該使用箭頭函數語法。標準語法不捕獲this。

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

Answer 2

使用箭頭功能和類屬性功能。有關綁定模式的更多信息，請閱讀article。嘗試添加你的方法爲：

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