React Native 中的过滤器数组答案

【问题标题】：Filter array in React NativeReact Native 中的过滤器数组
【发布时间】：2017-08-09 11:31:36
【问题描述】：

我尝试过滤数组。当用户在 React Native 中的搜索输入中键入内容时，我需要“实时过滤”，但我这样做就像我通常在 React 中进行过滤一样。出了点问题。你能看一下并告诉我哪里出错了吗？现在我有错误：undefined is not an object (this.state.inputValue.trim) 我想也许我应该为过滤器做一些其他方式？

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>
    );
  }
}

【问题讨论】：

已经有一个正确的答案，但另外我指出你可以直接写：const rowsNew = rows.filter(row => row.name.toLowerCase().match(inputValueLet);，而不是现有的代码。

标签： javascript arrays reactjs react-native filter

【解决方案1】：

React Native 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'
          />

【讨论】：

【解决方案2】：

您的state 中的inputValue 被声明为字符串''。

state = {
     inputValue: ''
}

解决错误undefined is not an object (this.state.inputValue.trim)。

我认为你应该将inputValue 声明为对象：

state = {
     inputValue: {}
}

【讨论】：