时间戳

首页 > 解决方案 > 对 flatList 中的项目进行排序。当我 setState() 时 FlatList 项目不更新

reactjs - 对 flatList 中的项目进行排序。当我 setState() 时 FlatList 项目不更新

问题描述

我有一个在平面列表中呈现的产品列表。

但是，我有一个切换按钮可以切换此列表的显示。也就是说，当为真时，它以最低价格显示商品，当为假时，它显示原始列表。

问题是当我第一次按下切换按钮时，它会将其状态更改为 true 并按价格组织列表。但是当我再次按下它时，它会将状态更改为 false，但它会继续显示按价格组织的列表。

我已经尝试了一切来进行此切换，但我做不到。有人可以告诉我哪里错了吗？

我的代码：

    import Products from '../../produtos';

    export default () => {
      const [toggleFilter, setToggleFilter] = useState(toggleFilter);

      useEffect(() => {
        setToggleFilter(false)
      }, [])

      const toggleOrdem = () => {
        setToggleFilter(!toggleFilter)
      }

      return (
        <ProductList>

          <Header />
          <Button title="toggle" onPress={toggleOrdem} />

          <FlatList
            keyExtractor={(item, index) => index.toString()}
            showsVerticalScrollIndicator={false}
            data={toggleFilter ? Products.sort((a, b) => a.precoFinal - b.precoFinal) : Products}
            renderItem={({ item }) => <Product data={item} />} />

        </ProductList >
      );
    };

标签： reactjsreact-native

解决方案

数据={切换过滤器？Products.sort((a, b) => a.precoFinal - b.precoFinal) : 产品}

对数组进行排序将改变现有数组。因此，如果toggleFilter是真的，您将永久更改 中的内容Products，然后渲染它。当您翻转toggleFilter为 false 时，您Products按原样使用，但由于之前的渲染，它现在是一个排序数组。

您需要在排序之前复制数组：

export default () => {
  const [toggleFilter, setToggleFilter] = useState(toggleFilter);

  useEffect(() => {
    setToggleFilter(false);
  }, []);

  const toggleOrdem = () => {
    setToggleFilter(!toggleFilter);
  };

  const sortedArray = toggleFilter
    ? [...Products].sort((a, b) => a.precoFinal - b.precoFinal)
    : Products;

  return (
    <ProductList>
      <Header />
      <Button title="toggle" onPress={toggleOrdem} />

      <FlatList
        keyExtractor={(item, index) => index.toString()}
        showsVerticalScrollIndicator={false}
        data={sortedArray}
        renderItem={({ item }) => <Product data={item} />}
      />
    </ProductList>
  );
};

出于性能原因，您可能希望记住排序而不是每次渲染时排序。这可以通过 useMemo 来完成：

const sortedArray = useMemo(() => {
  return toggleFilter
    ? [...Products].sort((a, b) => a.precoFinal - b.precoFinal)
    : Products;
}, [Products, toggleFilter]);

PS，这个效果很奇怪：

useEffect(() => {
  setToggleFilter(false)
}, [])

如果您希望切换以 false 开始，则删除效果并使用以下命令初始化状态const [toggleFilter, setToggleFilter] = useState(false);

推荐阅读