0

我使用 Flatlist 并在 renderHeader() 函数上按单词搜索。我可以过滤，但是当我删除字母时，我无法再次获得主列表。我认为有一个逻辑问题，但我尝试了一些东西后我找不到......

当我解决问题时，我有一个新的。我试图解决，但我做不到，我应该把问题摆在专家面前:)

import React, {Component, useState} from 'react'
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  SafeAreaView,
  ScrollView,
  Image,
  TextInput,
} from 'react-native'
import data from '../../data'

const Flatlistexample = () => {
  //main list state
  let [list, setList] = useState(data);
  //search state
  const [search, setSearch] = useState('');
  //search filter
  searchFilter = text => {
    // onChangeText
    const newData = list.filter(item => {
      const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`

      return listItem.indexOf(text.toLowerCase()) > -1;
    })
    setList(newData)
  }
  //search function
  renderHeader = () =>{
    return (
      <View style={styles.seachContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Search...'}
          value={search}
          onChangeText={text => {
           
            //setStates

            searchFilter(text)
            setSearch(text)
          }}></TextInput>
        <Text
          style={{
            alignItems: 'flex-start',
            color: 'black',
            fontSize: 22,
          }}>
          {search}
        </Text>
      </View>
    )
    
  }
  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}>
      <FlatList
        data={list}
        renderItem={({item, index}) => {
          return (
            <ScrollView>
              <SafeAreaView
                style={[
                  styles.container,
                  {backgroundColor: index % 2 === 0 ? '#fafafa' : '#bbb'},
                ]}>
                <Image style={styles.profile} source={{uri: item.picture}} />
                <View style={styles.rightside}>
                  <Text style={styles.name}>{item.name}</Text>
                  <Text style={styles.company}>{item.company}</Text>
                </View>
              </SafeAreaView>
            </ScrollView>
          )
        }}
        keyExtractor={item => item._id}
        //called search function
        ListHeaderComponent={renderHeader()}
      />
    </SafeAreaView>
  )
}

export default Flatlistexample

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: 'gray',
  },
  profile: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginLeft: 10,
  },
  rightside: {
    marginLeft: 20,
    justifyContent: 'space-between',
    marginVertical: 5,
  },
  name: {
    fontSize: 22,
    marginBottom: 10,
  },
  searchContainer: {
    padding: 10,
    borderWidth: 2,
    borderColor: 'gray',
  },
  textInput: {
    fontSize: 16,
    backgroundColor: '#f9f9f9',
    padding: 10,
  },
})

谢谢你的帮助

4

2 回答 2

0

I fixed...

How?

My main data state is constant, i'm filtering on data list with filter state. So my data list doesn't change anytime.

import React, {Component, useState} from 'react'
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  SafeAreaView,
  ScrollView,
  Image,
  TextInput,
} from 'react-native'
import data from '../../data'

const Flatlistexample = () => {
  //main list state
  let [list, setList] = useState(data)
  //search state
  const [search, setSearch] = useState('')
  //filter state
  const [updated, setUpdated] = useState(data)
  //search filter
  searchFilter = text => {
    // onChangeText
    if (text) {
      const newData = list.filter(item => {
        const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
        return listItem.indexOf(text.toLowerCase()) > -1
      })
        setUpdated(newData)
      
  }
  //search function
  renderHeader = () => {
    return (
      <View style={styles.seachContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Search...'}
          value={search}
          onChangeText={text => {
            searchFilter(text)
            setSearch(text)
          }}></TextInput>
        <Text
          style={{
            alignItems: 'flex-start',
            color: 'black',
            fontSize: 22,
          }}>
          {search}
        </Text>
      </View>
    )
  }

  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}>
      <FlatList
      //i'm showing filter state
        data={updated}
        renderItem={({item, index}) => {
          return (
            <ScrollView>
              <SafeAreaView
                style={[
                  styles.container,
                  {backgroundColor: index % 2 === 0 ? '#fafafa' : '#bbb'},
                ]}>
                <Image style={styles.profile} source={{uri: item.picture}} />
                <View style={styles.rightside}>
                  <Text style={styles.name}>{item.name}</Text>
                  <Text style={styles.company}>{item.company}</Text>
                </View>
              </SafeAreaView>
            </ScrollView>
          )
        }}
        keyExtractor={item => item._id}
        //called search function
        ListHeaderComponent={renderHeader()}
      />
    </SafeAreaView>
  )
}

export default Flatlistexample

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: 'gray',
  },
  profile: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginLeft: 10,
  },
  rightside: {
    marginLeft: 20,
    justifyContent: 'space-between',
    marginVertical: 5,
  },
  name: {
    fontSize: 22,
    marginBottom: 10,
  },
  searchContainer: {
    padding: 10,
    borderWidth: 2,
    borderColor: 'gray',
  },
  textInput: {
    fontSize: 16,
    backgroundColor: '#f9f9f9',
    padding: 10,
  },
})

/*
else if(text.length > uzunluk){
      setList(data)
      const newData = list.filter(item => {
        const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
  
        return listItem.indexOf(text.toLowerCase()) > -1;
      }) 
      setList(newData)
    }else if(text.length<uzunluk){
      setList(data)
      const newData = list.filter(item => {
        const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
  
        return listItem.indexOf(text.toLowerCase()) > -1;
      }) 
      setList(newData)
    }
*/

于 2021-01-24T08:24:02.120 回答
0

过滤数据

onSearchText = (value) => {
  this.setState({searchText: value})
  if(value.trim() == "" || value == null){
    this.setState({list: this.state.list}
  } else {
    let filter = this.state.list.fillter(data => {
    // data fillter logic //
    return data;
    })
    this.setState({filterData: filter})
    }

渲染平面列表

<FlatList
  extradata={this.state}
  data={searchText ? filterData : list}
 />
于 2021-01-23T18:58:47.960 回答