Reactjs 绑定ListView时出错

绑定listView时，渲染函数中出现错误。以下是错误代码和屏幕截图：

我的代码如下。我正在尝试将搜索框放在列表视图的顶部。一切正常，但当我尝试放置搜索框时，我开始出现上述错误：

import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, TextInput} from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';

const styles = StyleSheet.create({


  separator: { 
        flex: 1, 
       height: StyleSheet.hairlineWidth, 
       backgroundColor: '#8E8E8E', 
       },

       text: {
        marginLeft: 12,
        fontSize: 16,
      },
      header_footer_style:{

        width: '100%', 
        height: 45, 
        backgroundColor: '#FF9800'

    },
    textStyle:{

      alignSelf:'center',
      color: '#fff', 
      fontSize: 18, 
      padding: 7

    },
    MainContainer:
    {
       justifyContent: 'center',
       flex:1,
       margin: 10

    },

    TextStyle:
    {
       fontSize: 23,
       textAlign: 'center',
       color: '#000',
    },



});


const store = createStore(reducers);

class AutoCompActivity extends Component {

  constructor(props) {

    super(props);

    this.state = {

      // Default Value of this State
      text: '',

    }

    this.arrayholder =[];
  }



  SearchFilterFunction(text){

    const newData = this.arrayholder.filter(function(item){
        const itemData = item.services.ser.toUpperCase()
        const textData = text.toUpperCase()
        return itemData.indexOf(textData) > -1
    })
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newData),
        text: text
    })
}

  renderHeader = () => {

    var header = (

    <View style={styles.header_footer_style}>

      <Text style={styles.textStyle}> Tap the service to find the Loaction </Text>

    </View>

    );

    return header;

  };


  renderInitialView() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.setState({
      dataSource : ds.cloneWithRows(this.props.services),
    }, function(){

      this.arrayholder=this.props.services;
    });




    if (this.props.detailView === true) {
      return (
        <ServiceDetail />
      );
    } else {
      return (
        <View style={styles.MainContainer}>

       <TextInput 
       style={styles.TextInputStyleClass}
       onChangeText={(text) => this.SearchFilterFunction(text)}
       value={this.state.text}
       underlineColorAndroid='transparent'
       placeholder="Search Here"
        />



        <ListView 
          enableEmptySections={true}
          dataSource={this.state.dataSource}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          renderHeader={this.renderHeader}
          style={{marginTop:10}}
          renderRow={(rowData) => 
            <ServiceItem services={rowData} />

          }
        />
        </View>
      );
    }
  }



  render() {
    return (
      <View style={styles.container}>
        {this.renderInitialView()}
      </View>
    );
  }
}



const mapStateToProps = state => {
  return { 

    services: state.services,
    detailView: state.detailView,
  };
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);


const app1 = () => (
  <Provider store={store}>
    <ConnectedAutoCompActivity />
  </Provider>
)

export default app1;

---

非常感谢您的帮助。

在构造函数中绑定您的函数：

this.SearchFilterFunction = this.SearchFilterFunction.bind( this );

或使用箭头功能：

SearchFilterFunction = ( text ) => { ... };

关于绑定函数：

SearchFilterFunction = ( text ) => { ... };