関数_this3.xxxxx（）を呼び出すエラーが関数ではありません

Question

こんにちは、ループ内で作成されたTouchableOpacityをクリックすると、次のエラーが発生します。

それを呼び出すTouchableOpacityは、私は、私はコンストラクタでthis.onAddedContactPress = this.onAddedContactPress.bind(this);を追加することで問題を解決できると思っていたが、それはどんな影響を与えていないされ、ここで

constructor() { 

    super(); 

    this.pressRowContact = this.pressRowContact.bind(this); 
    this.fetchData = this.fetchData.bind(this); 
    this.goBack = this.goBack.bind(this); 
    this.onAddedContactPress = this.onAddedContactPress.bind(this); 
    this.sendMessage = this.sendMessage.bind(this); 

    this.state = { 
     loadingVisible: false, 
     inputText: "", 
     arrayContactsSelected: [], 
     dataContactList: [], 
     showContactList: false, 
    }; 
    } 


    componentDidMount() { 
    this.fetchData(); 
    } 


    onChangeTextHandler = (e) => { 
    this.textInputValue = e; 
    } 


    onAddedContactPress(){} 


    render() { 

    const { navigate } = this.props.navigation; 

    console.log(this.state.showContactList); 

    if(this.state.showContactList == true){ 
     var contactListView = <View style={styles.contactListWrapper}> 
      <FlatList 
       data = {this.state.dataContactList} 
       renderItem={({item}) => <TouchableOpacity onPress={() => this.pressRowContact(item)} > 
       <View style={styles.contactRow}> 
        <View style={styles.standardProfilePicWrapper}> 
         <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 30, height: 30}}/> 
        </View> 
        <Text>Someone Name Here</Text> 
       </View> 
      </TouchableOpacity>} 
      /> 
     </View> 
    }else { 
     var contactListView; 
    } 


    var selectedUsers = this.state.arrayContactsSelected.map(function(item) { 
     return (
      <TouchableOpacity onPress={() => this.onAddedContactPress(item)} key={item.userID} style={styles.selectedUserItem} > 
       <View style={styles.smallProfilePictureWrapper}> 
         <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 14, height: 14}}/> 
        </View> 
       <Text style={styles.contactSelectedName} >Oliver Rice</Text> 
      </TouchableOpacity> 
     ); 
    }); 

    /*<TextInput 
          style={styles.addContactInput} 
          onChangeText={this.onChangeTextHandler} 
          value={this.state.inputText} 
          />*/ 

    return (
     <KeyboardAvoidingView behavior="padding" style={{flex: 1}}> 
     <View style={{flex: 1}}> 
      <StatusBar hidden={true} /> 
      <View style={styles.headerBar}> 
       <NavBar navigation={this.props.navigation} goBack={this.goBack} title="NEW MESSAGE" backButton={true} /> 
      </View> 
      <View style={styles.contentWrapper}> 
       <View style={styles.addContactWrapper} > 
        <View style={styles.addContactLeft} > 
         <Text style={styles.contactTo}>To:</Text> 
        </View> 
        <View style={styles.addContactRight} > 
         {selectedUsers} 
         <TouchableOpacity style={styles.addedContactWrapper} onPress={() => this.showContacts("")}> 
          <Image source={require('../../images/icons/IconAddContact.png')} style={{width: 18, height: 18}}/> 
         </TouchableOpacity> 
        </View> 
       </View> 
       <View style={styles.mainContentWrapper} > 
        {contactListView} 
        <TextInput 
         style={styles.inputTextMainMessage} 
         multiline={true} 
         placeholder="Your message here" 
         blurOnSubmit={true} 
        /> 
       </View> 
       <TouchableOpacity onPress={() => this.sendMessage()} style={styles.buttonWrapper} > 
        <Text style={styles.sendMessage}>Send Message</Text> 
       </TouchableOpacity> 
      </View> 
     </View> 
     </KeyboardAvoidingView> 
    ); 
    } 

です。

Answer 1

onAddedContactPressこれを呼び出すには、レンダリング関数の外にある必要があります。 thisはコンポーネント自体を指します。 ES6の構文については、お使いのonPress機能が追加され

onAddedContactPress = (item) => { 
    console.log(item); 
} 

render() { 
    return (
    this.state.arrayContactsSelected.map(function(item) { 
     <TouchableOpacity onPress={() => this.onAddedContactPress(item)} key={item.userID} style={styles.selectedUserItem} > 
     <View style={styles.smallProfilePictureWrapper}> 
       <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 14, height: 14}}/> 
      </View> 
     <Text style={styles.contactSelectedName} >Name</Text> 
     </TouchableOpacity> } 
    ); 
} 

Answer 2

を試してみてください？私はそれが内部のレンダリング機能であり、それが問題を作り出すと思います。

私はそれをテストし、あなたのコードはうまく機能します。

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity, 
    Alert 
} from 'react-native'; 

export default class APP extends Component { 
    constructor(){ 
     super(); 
     this.state = { 
      contactsSelected: [ 
       {name: 'one'}, 
       {name: 'two'}, 
       {name: 'three'}, 
      ] 
     } 
    } 

    onAddedContactPress(item){ 
     Alert.alert(item.name) 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       {this.state.contactsSelected.map(item => { 
        return (
         <TouchableOpacity onPress={() => this.onAddedContactPress(item)} key={item.name}> 
          <Text>{item.name}</Text> 
         </TouchableOpacity> 
        ) 
       })} 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    } 
}); 

これが役立ちます。