我該怎么做下拉排序選項？ 我想使用 Dropdown 排序選項進行排序

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中的onSelect沒有任何參數，因為setSelect屬性確保您已經可以訪問所選內容。 我相信組件中的搜索欄僅用於過濾選項，而不是列表本身。

這是我放在一起的（演示）

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;