[英]Filter JSON data in React Native
我仍在学习 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
},
];
再次感谢所有帮助和建议!
您可以创建要显示过滤数据的新状态。 当 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.