react-native - 如何根据 react-native 中的数据按价格对平面列表进行排序？

Question

我想为价格从高到低、从低到高以及最近添加的排序按钮添加排序按钮。我找不到合适的方法来做到这一点。

我在堆栈屏幕的顶部栏上添加了按钮。我想在主屏幕上对列表进行排序。

以下是来自 api 的数据（您可以使用任何其他虚拟对象）：

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);
        setProducts(response.data.products);
      })
      .catch((err) => {
        console.log("Something Went Wrong : " + err);
      });
  }, []);

下面是平面列表代码（我想按高到低/从低到高/最近添加）：

<FlatList
              data={products}
              keyExtractor={(item) => item.id.toString()}
              renderItem={({ item }) => (
                <ItemList
                  title={item.name}
                  category={item.category}
                  stock={item.quantity}
                  price={item.price}
                  imageUri={item.image}
                  imageGallery={item.gallery_images}
                  navigation={navigation}
                  description={item.description}
                  yid={item.youtube_video_id}
                />
              )}
            />

标签： react-native

Answer 1

这是对我有用的代码：

const Asc = () => {
    fullData.sort(function (obj1, obj2) {
      return obj1.price - obj2.price;
    });
    setFullData([...fullData]);
  };

  const Desc = () => {
    fullData.sort(function (obj1, obj2) {
      return obj2.price - obj1.price;
    });
    setFullData([...fullData]);
  };```