Filter-Array in React Native

Question

Ich versuche, Array zu filtern. Ich brauche "Live-Filterung", wenn ein Benutzer etwas in die Sucheingabe in "React Native" eingibt, aber ich mache es so, wie ich es normalerweise bei React filtere. Etwas läuft schief. Können Sie einen Blick darauf werfen und mir sagen, wo ein Fehler ist? Jetzt habe ich Fehler: undefined is not an object (this.state.inputValue.trim) Ich denke, dass ich vielleicht einen anderen Weg für einen Filter tun sollte?

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { View, Image, TouchableOpacity, TextInput } from 'react-native'; 
import { TopName, BottomName, TitleLedger } from '../common/text'; 
import styles from './style'; 

const rows = [{ 
    "img": require('../../assets/avatar.png'), 
    "name": "Johnny", 
    "nick": "@johny", 
},{ 
    "img": require('../../assets/avatar.png'), 
    "name": "Johnny", 
    "nick": "@johny", 
},{ 
    "img": require('../../assets/avatar.png'), 
    "name": "Alex", 
    "nick": "@alex", 
},{ 
    "img": require('../../assets/avatar.png'), 
    "name": "Johnny", 
    "nick": "@johny", 
}]; 

export default class Payment extends Component { 
    state={ 
     inputValue: '' 
    } 
    onChangeHandler = (e)=> { 
     this.setState({inputValue: e.target.value}) 
     console.log(e.target.value, 'value') 
    } 
    render() { 
    const inputValueLet = this.state.inputValue.trim().toLowerCase(); 
    let rowsNew = []; 
    if(rows.length>0){ 
      rowsNew = rows.filter(row => { 
       return row.name.toLowerCase().match(inputValueLet) 
      }); 
     } 
    const { navigator } = this.props; 
    const dataRow = rowsNew.map((row, index) => { 
      return (
       <View style={styles.content}> 
       <Image source={row.img} style={styles.avatar}/> 
       <View key={index} id={index} style={styles.operation}> 
       <View style={styles.wrapper}> 
        <View style={styles.topName}> 
        <TopName label={row.name} /> 
        </View> 
        <View style={styles.bottomName}> 
        <BottomName label={row.nick} /> 
        </View> 
       </View> 
       </View> 
       </View> 
      ) 
      }) 
    return (
     <View> 
      <View> 
      <TextInput 
       style={styles.searchBar} 
       type="text" 
       value={this.state.inputValue} 
       onChange={this.onChangeHandler} 
       placeholder='Search' 
       /> 
      </View> 
     <View style={styles.container}> 
      {dataRow} 
     </View> 
     </View> 
    ); 
    } 
} 

Answer 1

Es gibt keine event.target.value ist in nativer TextInput#onChange reagieren. Verwenden Sie event.nativeEvent.text oder onChangeText event, wo Sie Text als Callback-Argument erhalten.

<TextInput 
      style={styles.searchBar} 
      type="text" 
      value={this.state.inputValue} 
      onChangeText={inputValue => this.setState({ inputValue })} 
      placeholder='Search' 
      /> 

Answer 2

inputValue in Ihrem state als String '' erklärt.

state = { 
    inputValue: '' 
} 

Um den Fehler zu beheben undefined is not an object (this.state.inputValue.trim).

Ich glaube, Sie inputValue als Objekt erklären sollte:

state = { 
    inputValue: {} 
}