Javascript 切换时排序对象数组，切换不起作用

发布于03月27日

我正在try 按"title"属性对一个对象数组进行排序.如何切换按Asc排序和按Desc按钮切换？

我有以下内容，但数据不按切换排序

  const [text, setText] = useState('');

  const [data, setData] = useState([]);
  const [toggleFilter, setToggleFilter] = useState(false);

  const sortedArray = useMemo(
    () =>
      toggleFilter
        ? [...data].sort((a, b) => a.title - b.title)
        : [...data].sort((a, b) => b.title - a.title),
    [data, toggleFilter],
  );

  return (
    <View>
      <FlatList
        style={styles.flatlist}
        data={sortedArray}
        renderItem={({ item }) => <Text>{item.title}</Text>}
        keyExtractor={(item) => item.id}
      />
      <View style={styles.container}>
    
        <Pressable
          style={styles.button}
          onPress={() => setToggleFilter(!toggleFilter)}
          testID="sort-direction">
          <Text style={styles.text}>{toggleFilter ? '⬇️' : '⬆️'}</Text>
        </Pressable>

      </View>
    </View>
  );
};

推荐答案

我找到了解决这个问题的办法！

所以问题出在这个场景中的排序.

在下面的代码中，我只使用了一种排序，还有String原型"localCompare".

注意:同样可以用"sort"函数实现，但"localCompare"很适合你的问题陈述

const [data, setData] = useState([{ title: 'A' }, { title: 'B' }, { title: 'C' }, { title: 'D' }, { title: 'E' }]);
const [toggleFilter, setToggleFilter] = useState(false);

const sortedArray = useMemo(
    () => data.sort((a, b) => (toggleFilter ? b.title.localeCompare(a.title) : a.title.localeCompare(b.title))),
    [data, toggleFilter]
);

return (
    <View>
        <FlatList
            style={styles.flatlist}
            data={sortedArray}
            renderItem={({ item }) => <Text>{item.title}</Text>}
            keyExtractor={item => item.id}
        />

        <Pressable style={styles.button} onPress={() => setToggleFilter(!toggleFilter)}>
            <Text style={styles.text}>{toggleFilter ? '⬇️' : '⬆️'}</Text>
        </Pressable>
    </View>
);