在 React Native 中过滤 JSON 数据

Question

I am still learning React Native and I'm trying to filter through a screen of elements that is JSON data. What I want to happen is to only show to the screen the filtered result. Would it be best for me to implement a new component called FilteredTicket? Any help will be appreciated!

Filter.js

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import { Colors } from './styles';
import Icon from 'react-native-vector-icons/Ionicons';
import { data } from './Data';
import Ticket from './Ticket';

const Filter = () => {

    return (
        <View>
        <TouchableOpacity 
            style={{marginRight: 30}}
            onPress={() => data.filter((j) => {
                j.isCompleted === true ? <Ticket ticketList={j.isCompleted} /> : '';
            })}
            >
            <Icon
                name='filter-outline'
                size={30}
                color={Colors.brand}
            />
        </TouchableOpacity>
        </View>
    )
}

export default Filter;

I should also note that the Ticket component takes in some props. One of which is the data to be displayed. That can be seen in its parent component called Home (since it's the Home screen).

Home.js

import React, {useState, useEffect} from 'react';
import {styles, Colors} from '../components/styles';
import { SafeAreaView } from 'react-native';
import Ticket from '../components/Ticket';
import {data} from '../components/Data';

const Home = ({navigation}) => {
    const [ticketList, setTicketList] = useState(data);

    const getTickets = () => {
        setTicketList(data);
    }
    useEffect(() => {
        getTickets();
    }, []);

    return (
        <SafeAreaView  style={styles.HomeContainer}>
            <Ticket 
                ticketList={ticketList}
                setTicketList={setTicketList}
            />
        </SafeAreaView>
    )
};

export default Home;

I also need the filtered result to go to the Ticket component as shown below:

import React, {useState, useEffect} from 'react';
import {Text, FlatList, View, SafeAreaView, Image, TouchableOpacity } from 'react-native';
import {styles, Colors} from './styles';
import {Ionicons} from '@expo/vector-icons';

const Ticket = ({ticketList}) => {
    const defaultImage = 'https://airbnb-clone-prexel-images.s3.amazonaws.com/genericAvatar.png';
    const [isComplete, setIsComplete] = useState();
    const [show, setShow] = useState();

    const showContent = (key) => {
        if (show == key) {
            // Clicked on it again ... false means expand nothing
            setShow(false);
            // console.log(todoRef);
        } else {
            // Clicked on something else ... save the key so we can expand the right thing later
            setShow(key); 
        }
    }
    const [users, setUsers] = useState([]);
    
    return (
        <SafeAreaView style={{flex: 1}}>
        <FlatList showsVerticalScrollIndicator={false}
            data={ticketList}
            renderItem={(data) => {
                return (
            <> 
            <TouchableOpacity key={data.item.key} onPress={() => showContent(data.item.key)}> 
                <View style={styles.TicketCard}>
                    <Image
                        style={styles.TicketCardImage}
                        source={{uri: defaultImage}} 
                    />
                    <View style={styles.TicketCardInner}>
                        <Text style={styles.TicketCardName}>{data.item.vehicle}</Text>
                        <Text style={styles.TicketCardSubject}>
                            {data.item.subject}
                        </Text>
                    </View>
                    <TouchableOpacity onPress={() => data.item.isCompleted = !data.item.isCompleted}>
                        <Ionicons
                            name='ellipsis-horizontal-circle'
                            color={Colors.brand}
                            size={50}
                            style={styles.TicketCardImage}
                        />
                    </TouchableOpacity>

                </View>
                <View style={styles.TicketCardExpand}>
                    <Text>
                
                {show == data.item.key && 
                // When we check to see if we are supposed to show something, then compare the key value
                
                    (<View style={{padding: 10, width:370}}>
                        <Text style={styles.TicketCardDesc}>
                            {data.item.desc}
                        </Text>

                        <Text style={{padding: 5}}>
                            Reported by: {data.item.name}
                        </Text>

                        <Text style={{padding: 5}}>
                            Reported: {data.item.dateReported}
                        </Text>
            
                        {data.item.isCompleted == true && ( 
                            <Text style={{padding: 5}}>
                                Confirmed Completion: {data.item.assigneeConfirmedComplete}
                            </Text>
                        )}
                    </View> )}
                    </Text>
                </View> 
            </TouchableOpacity>
            </>
        )}}
        />
        </SafeAreaView>
    )
};

export default Ticket;

Lastly, the data I separated from the Home component which I put inside its own file that I called Data.js as shown below.

export const data = [
    {
        name: 'Stan Jefferson',
        subject: 'U-Joint',
        desc: 'Lorem ipsum ...',
        assignedTo: 'Bob Smith',
        assigneeConfirmedComplete: 'utc',
        dateReported: 'Mon July 18, 2022',
        vehicle: 'Truck 1',
        media: '',
        key: '1',
        isCompleted: true
    },
    {
        name: 'Stan Jefferson',
        subject: 'Sub 2',
        desc: 'Lorem ipsum ...',
        assignedTo: 'Bob Smith',
        assigneeConfirmedComplete: 'NA',
        dateReported: 'Mon July 18, 2022',
        vehicle: 'Truck 2',
        media: '',
        key: '2',
        isCompleted: false
    },
];

Thanks again for all help and suggestions!

Answer 1

You can create a new state where you want to display the filtered data. When TouchableOpacity will press change the new State with the filtered data then render that filtred data to the screen.

If you want to display it in Filter.js then

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import { Colors } from './styles';
import Icon from 'react-native-vector-icons/Ionicons';
import { data } from './Data';
import Ticket from './Ticket';

const Filter = () => {
    const [filteredTicket, setFiltredTicket] = useState([])
    const handleFilterTicket = () => {
       setFiltredTicket(data.filter((j) => j.isCompleted === true)
    }
    const renderTicketList = () => {
       if (filteredTicket.length <= 0) return <></>;

       return <Ticket ticketList={filteredTicket} />
    }
    return (
        <View>
        <TouchableOpacity 
            style={{marginRight: 30}}
            onPress={handleFilterTicket}
            >
            <Icon
                name='filter-outline'
                size={30}
                color={Colors.brand}
            />
        </TouchableOpacity>
        
        {/* It will re-render when filter */}

        {renderTicketList()}

        </View>
    )
}
export default Filter;