Javascript 更新React应用程序中的状态，将旧数组替换为新排序的对象数组

我是一个新的反应者，刚刚开始学习。我试图根据产品的价格对物品进行分类。但是当我尝试更新状态时，它不会改变，尽管当我执行console.log（）时，我可以看到已排序的产品，但它不会在屏幕上更新。我在下面附上代码。任何帮助都将不胜感激

当我打开应用程序时。我看到了我所有的产品。但是，当我使用选择框对产品进行排序时，它只会显示相同的产品，而不会进行排序。事件被触发。但我怀疑我更新状态的方式是错误的

import './main.css'
import Filters from './components/Filters'
import Products from './components/Products'
import { useState } from 'react';


function App() {
  const [products,setProducts]=useState([
    {product_id:'1',product_name:"Razer Deathadder expert ergonomic mousepad",product_price:"20",product_path:"img/razer-deathadder-expert-ergonomic-original-imaf2z3xngbchfaz.jpeg"},
    {product_id:'2',product_name:"Zotac gtx 1080 graphics card",product_price:"320",product_path:"img/grap.jpg"},
    {product_id:'3',product_name:"Kingston 250 gb SSD ",product_price:"90",product_path:"img/ssd.jpg"},
    {product_id:'4',product_name:"Ryzen Processor",product_price:"250",product_path:"img/ry.jpg"}
    ]);


   let sortedProducts=[]
    const sortProducts=(e)=>{
      const sortBy=String(e.target.value);
      switch(sortBy){
      case 'plh': // sorting based on price low to high
      sortedProducts=products.sort((x,y)=>{
      return Number(x.product_price)-Number(y.product_price);
      });
      setProducts(sortedProducts); // I'm chaning the state here with my newly sorted array but its not rendering on screen
      break;
      case 'phl':
      sortedProducts=products.sort((x,y)=>{
      return Number(y.product_price)-Number(x.product_price);
      });
      setProducts(sortedProducts); // I'm chaning the state here with my newly sorted array but its not rendering on screen
      break;
      }
    }
   
  return (
    <div className="App">
      <div className="container">
      <Filters sortProducts={sortProducts}/>
      <Products products={products} />
      </div>
    </div>
  );
}

export default App;

导入“./main.css”
从“./components/Filters”导入筛选器
从“./组件/产品”导入产品
从“react”导入{useState}；
函数App（）{
const[products，setProducts]=useState([
{产品id:'1'，产品名称：“Razer-Deathadder expert人体工程学鼠标垫”，产品价格：“20”，产品路径：“img/Razer-Deathadder-expert-Humanogy-original-imaf2z3xngbchfaz.jpeg”，
{产品id:'2'，产品名称：“Zotac gtx 1080图形卡”，产品价格：“320”，产品路径：“img/grap.jpg”}，
{产品id:'3'，产品名称：“Kingston 250 gb SSD”，产品价格：“90”，产品路径：“img/SSD.jpg”}，
{产品id:'4'，产品名称：“Ryzen处理器”，产品价格：“250”，产品路径：“img/ry.jpg”}
]);
让sortedProducts=[]
const sortProducts=（e）=>{
const sortBy=String（如target.value）；
开关（sortBy）{
案例'plh'：//根据从低到高的价格进行排序
sortedProducts=产品。排序（（x，y）=>{
退货编号（x.产品价格）-编号（y.产品价格）；
});
setProducts（sortedProducts）；//我正在用新排序的数组更改状态，但它没有在屏幕上呈现
打破
案例“phl”：
sortedProducts=产品。排序（（x，y）=>{
退货编号（y.产品价格）-编号（x.产品价格）；
});
setProducts（sortedProducts）；//我正在用新排序的数组更改状态，但它没有在屏幕上呈现
打破
}
}
返回(
);
}
导出默认应用程序；

这是产品组件

import Product from './Product'

function Products({products}) {
    return (
        <div className="product-container">
         {products.map(element => (
         <Product product={element}/>
    ))}
        </div>  
    );
  }
  
  export default Products;
  

从“./Product”导入产品
函数乘积（{Products}）{
返回(
{products.map（元素=>(
))}
);
}
出口默认产品；

您需要使用排列运算符将已排序的产品设置为状态

尝试：-

---

请参见

请显示

产品

component@TwoHorses我现在检查过了。请在

应用程序

组件中创建一个类似CodeSandbox的组件。您可以渲染此组件：

{JSON.stringify（products）}

并查看产品是否使用更新的值重新渲染吗？（或仅提供代码沙盒复制）

setProducts([...sortedProducts]);