在使用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... 
} 
}