切换按钮控制对象数组按title升降序排序失效问题

• 核心问题：你的排序逻辑用了减法运算符-比较字符串类型的title属性，字符串相减会返回NaN，导致排序函数完全失效，所以切换toggleFilter时看不到排序变化。

• 修复方法：使用字符串专用的localeCompare()方法实现排序，它能正确处理字符串的字典序，还支持多语言场景。

修复后的完整代码：

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

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

const sortedArray = useMemo(
  () =>
    toggleFilter
      ? [...data].sort((a, b) => a.title.localeCompare(b.title))
      : [...data].sort((a, b) => b.title.localeCompare(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>
);

如果需要忽略大小写进行排序，可以给localeCompare添加配置参数：

a.title.localeCompare(b.title, undefined, { sensitivity: 'base' })

内容的提问来源于stack exchange，提问作者Bomber