Reactjs 对平面列表中的项目进行排序。平面列表项不存在'；当我设置state（）时不更新

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

但是，我有一个切换按钮，用于切换此列表的显示。也就是说，如果为true，则显示最低价格的项目；如果为false，则显示原始列表

问题是，当我第一次按下切换按钮时，它将其状态更改为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 >
      );
    };

从“../../produtos”导入产品；
导出默认值（）=>{
常量[toggleFilter，setToggleFilter]=useState（toggleFilter）；
useffect（（）=>{
setToggleFilter（错误）
}, [])
常量切换项=（）=>{
setToggleFilter（！toggleFilter）
}
返回(
index.toString（）}
showsVerticalScrollIndicator={false}
data={toggleFilter？Products.sort（（a，b）=>a.precoFinal-b.precoFinal）：Products}
renderItem={（{item}）=>}/>
);
};

data={toggleFilter？Products.sort（（a，b）=>a.precoFinal-b.precoFinal）：Products}

对数组进行排序将改变现有数组。因此，如果

toggleFilter

为真，则您将永久性地更改

产品中的内容，然后对其进行渲染。当您将
切换过滤器
为false时，您可以按原样使用
产品
，但由于之前的渲染，它现在是一个排序数组

您需要先复制阵列，然后再对其进行排序：

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>
  );
};



另外，这种效果很奇怪：

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

如果希望切换开始为false，则删除效果并使用
const[toggleFilter，setToggleFilter]=useState（false）初始化状态

data={toggleFilter？Products.sort（（a，b）=>a.precoFinal-b.precoFinal）：Products}

对数组进行排序将改变现有数组。因此，如果
toggleFilter
为真，则您将永久性地更改
产品中的内容，然后对其进行渲染。当您将
切换过滤器
为false时，您可以按原样使用
产品
，但由于之前的渲染，它现在是一个排序数组

您需要先复制阵列，然后再对其进行排序：

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>
  );
};



另外，这种效果很奇怪：

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

如果希望切换开始为false，则删除效果并使用
const[toggleFilter，setToggleFilter]=useState（false）初始化状态