为何数组排序后FlatList未按序显示且新增数据缺失？

开发FlatList展示API获取的对象数组时，需要先按字母排序数组，再在顶部添加默认数据，但实际渲染时数组未排序，默认数据也丢失了。

原代码：

const defaultListTab = {id: 18, name: "All"};
const [listTab, setListTab] = React.useState([]);

.then(function (result) { 
    setListTab(result.data.categoriesData)
    listTab.sort(function (a, b){
        if(a.name.toLowerCase() < b.name.toLowerCase()) {
            return -1;
        } else if(a.name.toLowerCase() > b.name.toLowerCase()) {
            return 1;
        }
        return 0;
    });
    setListTab(listTab => [defaultListTab, ...listTab])
)};
return () => abortCont.abort();

原数组结构：

Array [
  Object {
    "id": 29,
    "name": "Fruit",
  },
  Object {
    "id": 30,
    "name": "Vegetable",
  },
  Object {
    "id": 31,
    "name": "Dessert",
  }
]

问题原因 #

• useState更新异步：setListTab(result.data.categoriesData)是异步操作，执行后listTab不会立刻更新为新数据，后续listTab.sort()操作的还是初始空数组。
• 重复setState覆盖：两次调用setListTab会导致第二次操作覆盖第一次，且第一次的状态更新完全无效。
• 原地修改数组：sort()方法会原地修改原数组，违反React状态更新的不可变原则，可能导致组件无法正确触发重渲染。

修正后的代码 #

const defaultListTab = {id: 18, name: "All"};
const [listTab, setListTab] = React.useState([]);

.then(function (result) { 
    // 复制原数组避免原地修改API返回数据
    const sortedCategories = [...result.data.categoriesData].sort((a, b) => {
        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
    });
    // 组合默认项与排序后数组，一次性更新状态
    setListTab([defaultListTab, ...sortedCategories]);
)};
return () => abortCont.abort();

说明 #

• 用[...result.data.categoriesData]复制数组，避免破坏原始API返回数据。
• 用localeCompare()简化排序逻辑，更简洁且支持多语言场景下的字母排序。
• 一次性完成排序、添加默认项的操作后再更新状态，确保状态更新的准确性。

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