Блог

Главная - Вопросы по программированию - Как отсортировать массив, использующий метод map, по реквизитам в Javascript / React

Как отсортировать массив, использующий метод map, по реквизитам в Javascript / React

#javascript #reactjs #sorting #react-props

#javascript #reactjs #сортировка #react-props

Вопрос:

У меня есть массив с именем products, который использует метод map для перечисления всех элементов внутри него, и я пытаюсь отсортировать эти элементы по реквизиту price. Я перепробовал все типы методов и функций сортировки, но не могу заставить его работать.

JS

 const recentprods = products.map(prod => {
  return <TableRow name={prod.name} price={prod.price} />
})

Я пытался:

 const recentprods = products.map(prod => {
  return <TableRow name={prod.name} price={prod.price} />
}).sort((a,b) => a.price < b.price)

и

 recentprods.sort()

По сути, как можно сортировать компонент react по его реквизитам?

Ответ №1:

Вы должны применить сортировку перед отображением.

 const recentprods = products
  .sort((a,b) => a.price - b.price)
      // if you want to change the sorting direction: b.price - a.price
  .map(prod => {
     return <TableRow name={prod.name} price={prod.price} />
  });

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

1. Если я применяю сортировку до или после map, я не могу получить доступ к prod.price, prod.name , и т.д. Как бы мне это сделать тогда?

2. Должен ли я сделать другую карту поверх метода сортировки?

3. @Uriel Почему вы не можете получить доступ price к and name ? Они доступны внутри области действия функции map. Просто скопируйте и вставьте мой код.

4. @Uriel только что обновил мой ответ, вероятно > , проблема была в знаке gt. Операция минус должна отсортировать его.

5. Метод сортировки должен возвращать число, а не логическое значение, как показано в моем ответе. : D

Ответ №2:

Итак, да, в основном вам нужно сначала отсортировать его, а затем сопоставить, я создал для вас пример:

 constructor(props) {
    super(props);

    this.state = {
      products: [
        { name: 'Product 2', price: 2 },
        { name: 'Product 6', price: 6 },
        { name: 'Product 1', price: 1 },
        { name: 'Product 3', price: 3 },
        { name: 'Product 7', price: 7 },
        { name: 'Product 4', price: 4 },
        { name: 'Product 8', price: 8 },
        { name: 'Product 5', price: 5 },
      ],
    };
  }

  render() {
    return (
      <div>
        <h1>ONLY MAPPED</h1>
        {this.state.products.map((prod, i) => {
          return (
            <li key={i}>
              {prod.name} and its price: {prod.price}
            </li>
          );
        })}

        <h1>BOTH SORTED AND MAPPED.</h1>
        {this.state.products
          .sort((first, second) => {
            return first.price > second.price ? 1 : -1;
          })
          .map((prod, i) => {
            return (
              <li key={i}>
                {prod.name} and its price: {prod.price}
              </li>
            );
          })}
      </div>
    );
  }

Здесь вы можете ознакомиться с выводом

Ответ №3:

Вы хотите нормализовать, отсортировать и иным образом изменить свои данные по своему усмотрению, прежде чем применять их к компонентам React. В следующем случае products массив содержит отдельные объекты, каждый со price свойством, поэтому products предварительно отсортируйте массив, а затем сопоставьте элементы.

.sort Метод сортирует элементы массива на месте и возвращает отсортированный массив. Метод chained .map будет выполнять итерацию по отсортированному массиву в установленном порядке.

Я считаю, что следующее является допустимым решением. Обратите внимание, что цена рассматривается как number . Если это не так, сортировка может работать некорректно.

 const recentprods = products
  .sort((a, b) => a.price - b.price)
  .map(item => <TableRow name={item.name} price={item.price} />);

Ответ №4:

рассмотрим, что у нас есть массив объектов со свойствами name и price.

const Products = [

 {name:"p1",price: 5},
{name:"p2",price: 3},
{name:"p3",price: 2},
{name:"p4",price: 7},

]

Нам нужно отсортировать массив Products в порядке возрастания, используя его свойство price .

 console.log(Products.sort((a,b) =>  a.price-b.price )); // descending b.price-a.price

output - >

[
  {name: "p3", price: 2},
  {name: "p2", price: 3},
  {name: "p1",  price: 5},
  {name: "p4", price: 7}
]

Теперь вы можете вызвать функцию map с элементом jsx, который хотите добавить

 Products.sort((a,b) =>  a.price-b.price ).map(data => {
   return <TableRow name={prod.name} price={prod.price} />;
});

PS: ВЫ можете использовать эту функцию непосредственно в своем коде или использовать вспомогательную функцию, чтобы убедиться, что она отсортирована jsx.