Javascript 如何在React Redux应用程序中实现涨价和降价排序？

朋友们，一天中所有的好时光，你都需要通过涨价和降价来实现货物的分类。如何写这样一个动作。？我尝试使用sort方法编写对象数组的排序。数组本身是在存储中创建的，使用React hook useffect作为useffect中的第二个参数，我传递了这个相同的数组，但是只有当我们转到篮子时才会发生重绘，并且在实时情况下，我们看不到重绘。告诉我我做错了什么？以下是将产品加载到商店并呈现它们的组件本身：

function Home() {
    const books = useSelector(state=>state.books.books);
    const isFetched = useSelector(state=>state.books.isFetched);
    const dispatch = useDispatch();

    useEffect(()=>{
      if(!books.length ){
        dispatch(setBooks())
      } 
    },[books]
);
    

    return (
       
      <Card.Group itemsPerRow={5}>
                {!isFetched ?  <Loader/> : books.map(i=>(<Books title = {i.title}
                 key={i.id}
                 author={i.author} 
                 image={i.image} 
                 price={i.price}
                 rating={i.rating}
                 />))}
        </Card.Group>
    );
}

函数Home（）{
const books=useSelector（state=>state.books.books）；
const isFetched=useSelector（state=>state.books.isFetched）；
const dispatch=usedpatch（）；
useffect（（）=>{
如果（！books.length）{
调度（setBooks（））
} 
}，[书籍]
);
返回(
{！isFetched？：books.map（i=>（））}
);
}

这是一个减速机，其中记录了分拣和将货物装入仓库的链接：

const initialState = {
    books: [],
    isFetched: false,
}

export const SET_BOOKS = 'SET_BOOKS';


export const setBooks = (books) =>{
    return async dispatch => {
        const response = await fetch('http://localhost:3000/books');
        const json = await response.json();
        dispatch({
            type: SET_BOOKS,
            payload: json
        });
    }
 }
  
 const SET_FILTER_LOWER = 'SET_FILTER_LOWER';

 export const setFilter = filter => ({
   type: SET_FILTER_LOWER,
   payload: filter,
 });

 export const setBooksReducer = (state = initialState, action) =>{
     switch(action.type){
        case SET_BOOKS:
            return {...state, 
                books: state.books.concat(action.payload),
                isFetched: true
            }
        case SET_FILTER_LOWER:
        return {
          ...state,
          books: action.payload.sort((a,b)=>a.price-b.price)
        //   books: action.payload.filter((el)=>el.price<=300)
        };
        default: 
        return state

     }
      
}

const initialState={
书籍：[]，
isFetched:false，
}
export const SET_BOOKS='SET_BOOKS'；
导出const setBooks=（书籍）=>{
返回异步调度=>{
const response=等待获取（'http://localhost:3000/books');
const json=await response.json（）；
派遣({
类型：套书，
有效载荷：json
});
}
}
常量SET_FILTER_LOWER='SET_FILTER_LOWER'；
export const setFilter=filter=>({
类型：设置较低的过滤器，
有效载荷：过滤器，
});
导出常量setBooksReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
案例集书籍：
返回{…状态，
图书：state.books.concat（action.payload），
isFetched：真
}
案例集\过滤器\下部：
返回{
……国家，
书籍：action.payload.sort（（a，b）=>a.price-b.price）
//书籍：action.payload.filter（（el）=>el.price{
const dispatch=usedpatch（）；
const books=useSelector（state=>state.books.books）；
返回(
调度（设置过滤器（书籍））}
/>
);
}
导出默认菜单过滤器；

假设您的书籍选择器为您提供未排序的价格数组，对吗

[
 {price: 0.99},
 {price: 1.22},
 {price: 0.49},
 {price: 0.22}
]

现在，您可以创建一个具有排序版本的常量，而不是直接使用books

const newBooks = [...books];

然后在那里分类

newBooks.sort((book1, book2) => book1.price - book2.price))

现在你可以绘制新书了

newBooks.map(i=>(<Books title = {i.title}
                 key={i.id}
                 author={i.author} 
                 image={i.image} 
                 price={i.price}
                 rating={i.rating}
                 />))

newBooks.map（i=>（））

---

我不建议直接从书籍中进行排序，因为这会给您带来一些意外的行为或更新。

假设您的书籍选择器会给您一个未排序的价格数组，对吗

[
 {price: 0.99},
 {price: 1.22},
 {price: 0.49},
 {price: 0.22}
]

现在，您可以创建一个具有排序版本的常量，而不是直接使用books

const newBooks = [...books];

然后在那里分类

newBooks.sort((book1, book2) => book1.price - book2.price))

现在你可以绘制新书了

newBooks.map(i=>(<Books title = {i.title}
                 key={i.id}
                 author={i.author} 
                 image={i.image} 
                 price={i.price}
                 rating={i.rating}
                 />))

newBooks.map（i=>（））

---

我不建议直接从书本中进行排序，因为这会给您带来一些意外的行为或更新。

不确定您想要实现什么。您真的需要在减速机中进行排序吗？为什么不将该行为作为显示代码的一部分？不确定您想要实现什么。您真的需要以红色进行排序吗ucer？为什么不将该行为作为显示代码的一部分？