react-native - undefined 不是一个函数(在点击 onPress 时在 react native 中评估......

Question

这是代码，我无法在单击图标标签时调用 removeItem 函数。请帮助我，我是 React Native 的初学者。我被卡住了 3 天.

请帮助我以正确的方式调用函数。在此先感谢

import React from 'react';
import { StyleSheet, Text, View,TextInput,KeyboardAvoidingView,Dimensions,ScrollView,Alert,TouchableOpacity,Button,TouchableHighlight } from 'react-native';

import Icon from 'react-native-vector-icons/Entypo';

var {height, width} = Dimensions.get('window');

var d = new Date();

export default class App extends React.Component {

    constructor(props){

        super(props); 
        this.state = {
            noteList: [],
            noteText: ''

        }
    }

    addItems(){
        var a = this.state.noteText;
        this.state.noteList.push(a)
        this.setState({
            noteText:''
        })
        console.log(this.state.noteList)
            }

        removeItem(key) {
            console.log('removeItem is working',key);
            }



   render() {

    return ( 

      <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
        <View style={styles.header}>
            <Text style={{fontSize: 20}}>NOTE APPLICATION</Text>
        </View>

        <View style={styles.body}>
            <ScrollView>
                {this.state.noteList.map(function(value,key){
                return(
                    <View key={key} style={styles.bodyElements} > 
                        <Text>{key}</Text>
                        <Text>{value}</Text>
                        <Text>{d.toDateString()}</Text>
                         <Icon onPress={(key) => this.removeItem(key)} name="cross" color="white" size={40}/>
                    </View>
                )  
                })}
            </ScrollView>

        </View>

        <View style={styles.footer}>
            <TextInput style={{marginTop:10,marginLeft:10}}
            placeholder="Jot down your thoughts before they vanish :)"
            width={width/1.2}
            underlineColorAndroid="transparent"
            onChangeText={(noteText) => this.setState({noteText})}
            value={this.state.noteText}
        />
        <Icon style={{marginTop:15}} name="add-to-list" color="white" size={40} onPress={this.addItems.bind(this)}/>
        </View>
    </KeyboardAvoidingView>
    );
  }
}

Answer 1

我没有你的数组数据，所以我使用 a,b 值。但是 map 功能的主要问题就在这里，您需要将 this 作为参数传递。 checkin 代码

import React from 'react';

import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView, Dimensions, ScrollView, Alert, TouchableOpacity, Button, TouchableHighlight } from 'react-native';

//  import Icon from 'react-native-vector-icons/Entypo';

var { height, width } = Dimensions.get('window');

var d = new Date();

export default class App extends React.Component {

  constructor(props) {

    super(props);
    this.state = {
      noteList: ['a','b'],
      noteText: ''

    }
  }

  addItems() {
    var a = this.state.noteText;
    this.state.noteList.push(a)
    this.setState({
      noteText: ''
    })
    console.log(this.state.noteList)
  }

  removeItem(key) {
    console.warn('removeItem is working');
  }
  render() {
    return (
      <View >
        <View style={styles.header}>
          <Text style={{ fontSize: 20 }}>NOTE APPLICATION</Text>
          <Button title="try" onPress={(key) => this.removeItem()} name="cross"
            size={40} />

        </View>

        <View style={styles.body}>

                {this.state.noteList.map(function(value,key){
                return(
                    <View key={key} style={styles.bodyElements} > 
                        <Text>{key}</Text>
                        <Text>{value}</Text>
                        <Text>{d.toDateString()}</Text>
                         <Button title="try" 
                         onPress={() => this.removeItem()} 
                         name="cross"
                          color="white"
                           size={40}/>
                    </View>
                )  
                },this)}


        </View>

      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 25,
    textAlign: 'center',
    margin: 10,
  },
  child: {
    fontSize: 18,
    textAlign: 'center',
    margin: 10,
    backgroundColor: 'green',
    height: 100,
    width: 200,
  },
});