搜索
搜索

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

TRINA CHAUDHURI 发表于 Dev
88
崔娜·楚杜里

在此处输入图片说明

如标题所示，我想实现以下模型，我有一个本地导入的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',
        author: null,
        description: 'Essa Gelada Eu vou beber'
    },
    {
        img: 'https://vintageculture.com/wp-content/uploads/2020/04/Slow-Down-VC-e-Slow-Motion-Remix.jpg',
        author: null,
        description: 'Slow Down (feat. Jhon)'
    },
    {
        img: 'https://i.pinimg.com/474x/18/a3/b2/18a3b25cf87f439a5c0bc0fa7ae0ca54.jpg',
        author: null,
        description: 'Marilia Mendonça'
    },
    {
        img: 'https://i.scdn.co/image/ab67616d0000b273d77d08d4bb06171ce0fe2a0e',
        author: null,
        description: 'Jorge & Mateus'
    },
    {
        img: 'https://i.scdn.co/image/ab67616d0000b2738ddd20bf644f1d50adafad7b',
        author: null,
        description: 'All Around The World'
    },
]

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

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

export const artists = [
    {
        img: 'https://i.scdn.co/image/ab67706c0000da845f2575c6513aa8e264879e7d',
        author: 'Jorge & Mateus',
        description: 'Essa Gelada Eu vou beber'
    },
    {
        img: 'https://i.scdn.co/image/ab67616d0000b2738ddd20bf644f1d50adafad7b',
        author: 'R3AB',
        description: 'All Around The World'
    },
    {
        img: 'https://vintageculture.com/wp-content/uploads/2020/04/Slow-Down-VC-e-Slow-Motion-Remix.jpg',
        author: 'Vintage Culture',
        description: 'Slow Down (feat. Jhon)'
    },
    {
        img: 'https://i.scdn.co/image/ab67616d0000b273d77d08d4bb06171ce0fe2a0e',
        author: 'Jorge & Mateus',
        description: 'Jorge & Mateus'
    },
    {
        img: 'https://i.pinimg.com/474x/18/a3/b2/18a3b25cf87f439a5c0bc0fa7ae0ca54.jpg',
        author: 'Marilia Mendonça',
        description: 'Marilia Mendonça'
    },
    {
        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',
        author: 'R3AB',
        description: null
    },
    {
        img: 'https://i.scdn.co/image/82e6e7e4f318d0b2ba80b09d00db2552966f2fdc',
        author: 'Liu',
        description: 'Your Daily Mix 2'
    },
    {
        img: 'https://i.scdn.co/image/ab67706f000000026cac5751f488923a32f4ee79',
        author: 'Martin Garrix',
        description: null
    },
    {
        img: 'https://penews.com.br/wp-content/uploads/2019/10/vintge-e1571597522273.jpg',
        author: 'Vintage Culture',
        description: null
    },
    {
        img: 'https://i.scdn.co/image/339b4f2b8fa072d2130ad69cd603919e6279258e',
        author: 'ALOK',
        description: null
    },
]

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

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...')

任何建议都会有所帮助。

萨奇科技

您的代码有几个问题。fitlerdata方法不返回任何内容，并且过滤功能实现根据您的要求是错误的。我已经修改了您的代码。请立即尝试。

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) => user.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>{user.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,
    },
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何根据关键字列表过滤Scala SQL上下文数据框中的文本

根据关键字列表搜索对象列表

如何根据肯定和否定关键字的数量对熊猫数据框中的文本进行分类

Sharepoint：如何根据搜索关键字过滤常见问题列表

在数据框的每一行中进行搜索时，如何从关键字列表中获取匹配的关键字？

根据列表中的关键字从数据框中过滤文本

给定关键字和要搜索的字段列表时，如何过滤数组？

如何对在 Django 中使用关键字搜索后显示的对象结果进行排序

基于关键字搜索过滤数据

如何过滤tweepy中的关键字搜索

如何在CouchDB中实现关键字搜索

如何根据数组中的预定义关键字过滤和匹配来自 URL 的查询

如何根据字符串中的特定关键字对列表进行排序

如何在自动建议结果列表中突出显示搜索关键字 React JS

如何过滤字符串列表中的关键字？

如何在实体列表中搜索关键字？

如何在页面 Codeigniter 中显示关键字搜索

在对象中搜索关键字

如何根据关键字获取数据

根据关键字搜索列表以附加特定列表内容

用过滤器和关键字搜索对象数组

根据找到最多的关键字过滤列表

根据完整关键字突出显示搜索关键字的文字

在所有DataFrame列中搜索关键字并进行过滤

AngularJS（过滤器）：如何对对象属性实施多关键字搜索？

如何根据搜索关键字对字符串数组进行排序？

如何通过搜索列表中给定的关键字值在Python pandas数据框中添加新列？

jQuery使用关键字搜索和过滤

MySQL：根据“关键字”位置搜索数据库

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    用日期数据透视表和日期顺序查询

  3. 3

    应用发明者仅从列表中选择一个随机项一次

  4. 4

    Java Eclipse中的错误13，如何解决？

  5. 5

    在Windows 7中无法删除文件（2）

  6. 6

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  7. 7

    套接字无法检测到断开连接

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    有什么解决方案可以将android设备用作Cast Receiver？

  10. 10

    Mac OS X更新后的GRUB 2问题

  11. 11

    ggplot：对齐多个分面图-所有大小不同的分面

  12. 12

    验证REST API参数

  13. 13

    如何从视图一次更新多行（ASP.NET - Core）

  14. 14

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  15. 15

    计算数据帧中每行的NA

  16. 16

    检索角度选择div的当前值

  17. 17

    离子动态工具栏背景色

  18. 18

    UITableView的项目向下滚动后更改颜色，然后快速备份

  19. 19

    VB.net将2条特定行导出到DataGridView

  20. 20

    蓝屏死机没有修复解决方案

  21. 21

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

热门标签

归档