我该如何做下拉排序选项?我想用下拉排序选项排序

Question

我是React Native的新手。我在做一个电影应用，我想用下拉排序选项排序。我从URL中提取了我的数据。我怎么做呢?下拉排序选项?我想排序。"按新排序-按旧排序-按随机排序">

import React, { useState } from 'react';
import { View, TextInput, FlatList, ActivityIndicator, Text } from 'react-native';
import useFetch from '../../components/Hooks/useFetch';
import styles from './Sorting.style';
import { SelectList } from 'react-native-dropdown-select-list'
const Sorting = () => {
const {data, loading} = useFetch();
const [list, setList] = useState(data);

const handleFilter = text => {
const filteredList = data.filter(search => {
const searchedText = text.toLowerCase();
const currentTitle = search.title.toLowerCase();
return currentTitle.indexOf(searchedText) > -1;
})
setList(filteredList); 
}

if (loading) {
return <ActivityIndicator style={{flex: 1, justifyContent: "center"}} size="large" />
}
const renderMovies = ({item}) => <Text>{item.title}</Text>
return (
<View style={styles.container}>
<SelectList 
placeholder='Sırala' 
onSelect={handleFilter}
setSelected={setList}
data={list}
/>
<FlatList
numColumns={2}
horizontal={false}
data={data}
renderItem={renderMovies}
/>
</View>
)
}
export default Sorting;

Answer 1

react-native-dropdown-list中的onSelectprop没有任何参数，因为setSelectprop确保您已经可以访问所选择的内容。我相信组件中的搜索栏只是用来过滤选项的，而不是列表本身。

这是我所做的(demo)

import React, { useState, useCallback, useEffect } from 'react';
import {
View,
FlatList,
ActivityIndicator,
Text,
StyleSheet,
} from 'react-native';
import { TextInput } from 'react-native-paper';
import { SelectList } from 'react-native-dropdown-select-list';
import useFetch, { formatDate } from './components/Hooks/useFetch';
const SORT_TYPES = ['default', 'newest', 'oldest', 'random'];
const SORT_FUNCTIONS = {
oldest: (a, b) => a.creationTime - b.creationTime,
newest: (b, a) => a.creationTime - b.creationTime,
random: () => Math.random(),
};
const Sorting = () => {
const { data, loading } = useFetch();
const [list, setList] = useState([]);
const [sortType, setSortType] = useState(SORT_TYPES[0]);
const [filter, setFilter] = useState('');
const [filteredList, setFilteredList] = useState([]);
const handleSort = useCallback(() => {
if (!data) return;
if (sortType == 'default') setList(data);
const sortFunction = SORT_FUNCTIONS[sortType]
setList((prev) => {
const newList = [...prev];
return newList.sort(sortFunction);
});

}, [data, sortType]);
// data initial value will be null/undefined when it changes update other values
useEffect(() => {
if (data) {
setList(data);
setFilteredList(data);
}
}, [data]);
// when filter changes update list
useEffect(() => {
if (filter.length < 1) setFilteredList(list);
else
setFilteredList((prev) =>
prev.filter((search) => {
const searchedText = filter.toLowerCase();
const currentTitle = search.title.toLowerCase();
return currentTitle.indexOf(searchedText) > -1;
})
);
}, [filter, list]);
if (loading) {
return (
<ActivityIndicator
style={{ flex: 1, justifyContent: 'center' }}
size="large"
/>
);
}
const renderMovies = ({ item }) => (
<View style={styles.itemContainer}>
<View style={styles.textContainer}>
<Text>
{item.title}
{'n'}
</Text>
<Text>Date:{formatDate(item.creationTime)}</Text>
</View>
</View>
);
return (
<View style={styles.container}>
<SelectList
onSelect={handleSort}
setSelected={setSortType}
data={SORT_TYPES}
search={false}
/>
<FlatList
numColumns={2}
horizontal={false}
data={filteredList}
renderItem={renderMovies}
stickyHeaderIndices={[0]}
ListHeaderComponent={
<TextInput
mode="outlined"
label="Filter list"
onChangeText={setFilter}
value={filter}
dense
/>
}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 8,
},
itemContainer: {
width: '50%',
borderWidth: 1,
alignItems: 'center',
padding: 4,
margin: 4,
flexWrap: 'wrap',
},
textContainer: {
margin: 4,
flexWrap: 'wrap',
},
});
export default Sorting;