在 React Native 中過濾 JSON 數據

Question

我仍在學習 React Native，我正在嘗試通過 JSON 數據的元素屏幕進行過濾。 我想要發生的只是在屏幕上顯示過濾后的結果。 我最好實現一個名為 FilteredTicket 的新組件嗎？ 任何幫助將不勝感激！

過濾器.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;

我還應該注意 Ticket 組件需要一些道具。 其中之一是要顯示的數據。 這可以在其名為 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;

我還需要將過濾后的結果轉到 Ticket 組件，如下所示：

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;

最后，我從 Home 組件中分離出的數據，我將其放入我稱為Data.js的自己的文件中，如下所示。

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
    },
];

再次感謝所有幫助和建議！

Answer 1

您可以創建要顯示過濾數據的新狀態。 當 TouchableOpacity 將按下更改帶有過濾數據的新狀態時，然后將過濾后的數據呈現到屏幕上。

如果你想在Filter.js中顯示它，那么

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;