如何实现根据用户关键字进行搜索和过滤，以显示对象列表中的数据？

问题描述

正如标题所述，我想实现以下模型，我有一个本地导入的json文件，并且我希望用户根据用户写的内容在搜索栏上写，我希望对json进行过滤并显示它在底部区域。 我的json对象：

export const cards = [
    {
        img: 'https://media.emailonacid.com/wp-content/uploads/2019/05/EOA_MediaQueries2019_Blog.jpg',author: null,description: 'Liked Songs'
    },{
        img: 'https://i.scdn.co/image/ab67706c0000da845f2575c6513aa8e264879e7d',description: 'Essa Gelada Eu vou beber'
    },{
        img: 'https://vintageculture.com/wp-content/uploads/2020/04/Slow-Down-VC-e-Slow-Motion-Remix.jpg',description: 'Slow Down (feat. Jhon)'
    },{
        img: 'https://i.pinimg.com/474x/18/a3/b2/18a3b25cf87f439a5c0bc0fa7ae0ca54.jpg',description: 'Marilia Mendonça'
    },{
        img: 'https://i.scdn.co/image/ab67616d0000b273d77d08d4bb06171ce0fe2a0e',description: 'Jorge & Mateus'
    },{
        img: 'https://i.scdn.co/image/ab67616d0000b2738ddd20bf644f1d50adafad7b',description: 'All Around The World'
    },]

export const recentlys = [
    {
        img: 'https://i.scdn.co/image/ab67616d0000b2738ddd20bf644f1d50adafad7b',author: 'R3AB',author: 'Vinatge Culture',author: 'Marilia Mendonça',author: 'Jorge & Mateus',]

export const playlists = [
    {
        img: 'https://vintageculture.com/wp-content/uploads/2020/04/Slow-Down-VC-e-Slow-Motion-Remix.jpg',]

export const artists = [
    {
        img: 'https://i.scdn.co/image/ab67706c0000da845f2575c6513aa8e264879e7d',author: 'Vintage Culture',{
        img: 'https://i.scdn.co/image/1fd90cd274102d458ec3a9243ced32e659738133',author: 'Calvin Harris',description: 'Your Daily Mix 1'
    },{
        img: 'https://i.scdn.co/image/5e79a3aa31ed34c951b607e26c0df690c0118fc8',author: 'KVSH',description: null
    },{
        img: 'https://i1.sndcdn.com/avatars-000494458926-ftqfqe-t500x500.jpg',{
        img: 'https://i.scdn.co/image/82e6e7e4f318d0b2ba80b09d00db2552966f2fdc',author: 'Liu',description: 'Your Daily Mix 2'
    },{
        img: 'https://i.scdn.co/image/ab67706f000000026cac5751f488923a32f4ee79',author: 'Martin Garrix',{
        img: 'https://penews.com.br/wp-content/uploads/2019/10/vintge-e1571597522273.jpg',{
        img: 'https://i.scdn.co/image/339b4f2b8fa072d2130ad69cd603919e6279258e',author: 'ALOK',]

下面是我编写的确切代码以及要在其中实现该功能的地方：

import React,{useState} from 'react';
import {
  SafeAreaView,ScrollView,View,Text,TextInput,StyleSheet,Dimensions,} from 'react-native';
import {TabView,SceneMap} from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/FontAwesome';

import {cards} from '../../Data/Home';

const FirstRoute = () => <View style={[styles.scene]} />;

const SecondRoute = () => <View style={[styles.scene]} />;
const initialLayout = {width: Dimensions.get('window').width};
export default function Search() {
  const [search,setSearch] = useState({});
  const [index,setIndex] = React.useState(0);
  const [tmpCards] = useState(cards);
  const [routes] = React.useState([
    {key: 'first',title: 'Users'},{key: 'second',title: 'Videos'},]);

  const renderScene = SceneMap({
    first: FirstRoute,second: SecondRoute,});

  const filteredData = () => {
    tmpCards.filter((user) => {
      console.log(
        tmpCards.description.toLowerCase().includes(search.toLowerCase()),);
    });
  };
  return (
    <SafeAreaView style={{flex: 1,backgroundColor: '#fff'}}>
      <View style={{padding: 10}}>
        <View style={{flexDirection: 'row',backgroundColor: '#D3D3D3'}}>
          <Icon
            name="search"
            size={20}
            style={{marginTop: 12,marginLeft: 5}}
          />

          <TextInput
            placeholder="Search"
            value={search}
            onChangeText={(search) => setSearch(search)}
            style={{marginLeft: 10}}
          />
          {filteredData.map((user,id) => {
            <Text>{tmpCards.description}</Text>;
          })}
        </View>
      </View>
      <TabView
        navigationState={{index,routes}}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={initialLayout}
        style={{backgroundColor: '#fff'}}
      />
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  scene: {
    flex: 1,},});

但是出现此错误：

 TypeError: undefined is not a function (near '...filteredData.map...')

任何建议都会有所帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）