フィルターアレイの反応ネイティブ

Question

私は配列をフィルターしようとします。ユーザーがReact Nativeの検索入力に何かを入力したときに「ライブフィルタリング」が必要ですが、通常はReactでフィルタリングするのと同じように行います。何かがおかしい。 あなたは見て、間違いがどこにあるのか教えていただけますか？今私はエラーがある：undefined is not an object (this.state.inputValue.trim)私は多分私はフィルタのために別の方法を行う必要がありますと思いますか？あなたのstateで

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

ネイティブTextInput#onChangeを反応させるにはevent.target.valueはありません。 event.nativeEvent.textまたはonChangeText eventを使用して、テキストをコールバック引数として取得します。

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

Answer 2

inputValue文字列''として宣言されています。

state = { 
    inputValue: '' 
} 

エラーundefined is not an object (this.state.inputValue.trim)を解決するには

私はあなたがオブジェクトとしてinputValueを宣言すべきだと思う：

state = { 
    inputValue: {} 
}