Блог

Главная - Вопросы по программированию - я не могу выполнить сортировку кнопок по json в react

я не могу выполнить сортировку кнопок по json в react

#json #reactjs

#json #reactjs

Вопрос:

я хочу иметь кнопку и при нажатии на нее сортировать товары по цене

   state = {
    products: storeProducts,
  };
  render() {
    return (
      <React.Fragment>
        <ProductWrapper className="py-5">
          <div className="container">
            <Title name="our" title="products" />
            <select>
              <option value="price">Price</option>
              <option value="name">Name</option>
            </select>
            <div className="row">
              <ProductConsumer>
                {(value) => {
                  return value.products.map((product) => {
                    return <Product key={product.id} product={product} />;
                  });
                }}
              </ProductConsumer>
            

const ProductWrapper = styled.section``;

я пробовал несколько способов, но ничего не сработало
https://5f3f90843848e739f77ff21f—react-e-commerce-store-excercise.netlify.app / вот веб-сайт

вот данные

 export const storeProducts = [
 {
   id: 1,
   title: "Samsung 20 plus",
   img: "img/20plus.png",
   price: 1197,
   company: "Samsung",
   info:
     "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green gentrify.",
   inCart: false,
   count: 0,
   total: 0,
 },
 {
   id: 2,
   title: "Samsung 20ultra",
   img: "img/20ultra.png",
   price: 1391,
   company: "SAMSUNG",
   info:
     "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juigentrify.",
   inCart: false,
   count: 0,
   total: 0,

 }

];

Ответ №1:

Это должно помочь вам

 onClick = () => {
    let newprod_list = this.state.products.sort((a,b) => {
        if (a.price < b.price) return -1;
        if (a.price === b.price) return 0;
        return 1;
    });
    this.setState({products:newprod_list});
}

Назначьте эту функцию прослушивателю onClick для кнопки (это сортирует в порядке возрастания)

Возможно, вы захотите отредактировать свою функцию рендеринга на что-то вроде..

 <ProductConsumer>
{this.state.products.map(v => <Product key={v.id} product={v} />)}
</ProductConsumer>

Комментарии:

1. вам нужно newprod_list в this.setState({products:newprod_list }); не this.setState({products:newprod}); правильно?

2. возможно, это последнее if (a.price === b.price) return 1; может быть просто return 1; , поскольку об остальных позаботились?

3. да. это должно быть newprod_list . Извините за опечатку. и да. это может быть просто return 1 . Я сделал это, чтобы упростить задачу для читателя. Спасибо за отзыв @SafaLabash попробуйте обновленную правку

4. Убедитесь, что this.state.products это массив. сортировка должна работать с массивом.