React Native中如何按价格高低、最新添加等规则对FlatList进行排序？

你可以选择前端本地排序或者后端请求排序两种方案，前者适合数据量小的场景，无需额外发请求；后者适合数据量大的场景，性能更优。

方案1：前端本地排序（无需额外发请求） #

步骤1：新增状态变量 #

首先在组件内新增两个状态，分别存储原始产品数据和当前选中的排序类型：

// 原始产品数据，不随排序修改，用于每次排序的基准源
const [rawProducts, setRawProducts] = useState([]);
// 排序后给FlatList渲染的数据
const [products, setProducts] = useState([]);
// 当前排序类型：1=最新添加 2=价格从低到高 3=价格从高到低
const [sortType, setSortType] = useState(1);

步骤2：修改数据获取逻辑 #

拿到接口返回的原始数据后，同时存到原始数据状态和默认排序的渲染数据状态：

useEffect(() => {
    let tok = authContext.user;
    let id = authContext.userid;
    axios
      .post(
        url.productlist,
        qs.stringify({
          fcm_token: tok,
          sort: 1,
          user_id: id,
          page: 1,
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      )
      .then((response) => {
        console.log(response.data);
        // 保存原始数据
        setRawProducts(response.data.products);
        // 默认用最新添加排序赋值给渲染列表
        setProducts(response.data.products);
      })
      .catch((err) => {
        console.log("Something Went Wrong : " + err);
      });
  }, []);

步骤3：实现排序切换函数 #

写一个处理排序切换的函数，绑定到顶部三个排序按钮的点击事件上：

const handleSortChange = (type) => {
  setSortType(type);
  let sortedList = [...rawProducts];
  switch(type) {
    case 2: 
      // 价格从低到高
      sortedList.sort((a, b) => Number(a.price) - Number(b.price));
      break;
    case 3:
      // 价格从高到低
      sortedList.sort((a, b) => Number(b.price) - Number(a.price));
      break;
    case 1:
    default:
      // 最新添加，默认用接口返回的原始顺序即可，如果有创建时间字段也可以按create_time排序
      // sortedList.sort((a,b) => new Date(b.create_time) - new Date(a.create_time))
      sortedList = [...rawProducts];
      break;
  }
  setProducts(sortedList);
}

注：如果你的产品数据里有create_time/add_time这类标识添加时间的字段，可以把case1的排序逻辑替换成按时间倒序，结果更准确。

步骤4：给顶部按钮绑定事件 #

三个排序按钮分别对应调用handleSortChange(1)、handleSortChange(2)、handleSortChange(3)即可，原有的FlatList代码无需修改。

方案2：后端请求排序（适合数据量大的场景） #

如果你的产品接口支持不同sort参数返回对应排序的结果，直接修改请求参数即可：

步骤1：新增排序状态 #

const [sortType, setSortType] = useState(1);
const [products, setProducts] = useState([]);

步骤2：把sortType加到useEffect依赖项，切换排序时重新拉取数据 #

useEffect(() => {
    let tok = authContext.user;
    let id = authContext.userid;
    axios
      .post(
        url.productlist,
        qs.stringify({
          fcm_token: tok,
          sort: sortType, // 替换成当前排序类型
          user_id: id,
          page: 1,
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      )
      .then((response) => {
        console.log(response.data);
        setProducts(response.data.products);
      })
      .catch((err) => {
        console.log("Something Went Wrong : " + err);
      });
  }, [sortType]); // 依赖sortType，切换时自动重新请求

步骤3：绑定按钮事件 #

顶部三个按钮点击时调用setSortType(对应参数值)即可，参数值和后端约定好就行，比如1=最新添加、2=价格升序、3=价格降序。

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