在切换时对对象数组进行排序，切换不起作用[重复]

Question

我正在尝试按“标题”属性对对象数组进行排序。如何通过按钮切换按升序和降序排序？

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

  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>
  );
};

Answer 1

我找到了解决方案！！

所以问题在于这种情况下的排序。

在下面的代码中，我仅使用一种排序，并且还使用字符串原型“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>
);