绑定ListView时出错

Question

当我绑定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;

我的JSON（service.json）文件如下所示：

[


    {
        "id":0,
        "ser": "Test Service",
        "Location": "TestLoc",
        "Phone1":"(999)-999-5050",
        "SecondLoc": "TestLoc2",
        "email":"test@test.com",
        "sourceLat":"33.977806",
        "sourceLong":"-117.373261",
        "destLatL1":"33.613355",
        "destLongL1":"-114.596569",
        "destLatL2":"33.761693",
        "destLongL2":"-116.971169",
        "destAddr1": "Test Address, Test Drive",
        "destAddr2": "Test Address2, Test Drive2",
        "onlineURL":"",
        "Phone2": "(900)-900-3333"
      },
]

任何帮助都将受到高度赞赏。

Answer 1

在构造函数中绑定函数：

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

或使用箭头功能：

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

关于绑定功能：https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56