マップを使用して反復処理を行う際に、私の関数を実装する場所は？

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にアクセスするには、矢印関数の構文を使用する必要があります。標準構文では、thisはキャプチャされません。

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

Answer 2

矢印機能とクラスプロパティ機能を使用します。結合パターンの詳細については、articleを参照してください。私は、問題はあなたがthis.state.selectedImages.map()の引数として矢印機能を使用していないということであると考えてい

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