Как отсортировать значение в цикле карты в ReactJS

Question

Я изучаю React JS и для этого я копирую веб-сайт, который я разработал в PHP. И я дошел до определенного момента, что возник вопрос, которого я не нахожу в своих поисках. Я использую Ax ios, чтобы взять данные из базы данных и представить их на внешнем интерфейсе. В результате я создаю State и использую map () для создания al oop, пока что все хорошо, но я бы хотел упорядочить этот результат по значению, которое возвращается map ().

У меня есть возвращаемое поле с именем голосования, которое представляет собой числа, которые я хочу использовать для сортировки результата.

Следуйте кодам

Приложение. js

class App extends Component {
  state = {
    places: []
  };

  componentDidMount() {
    axios
      .get('http://localhost:1337/places/')
      .then((res) => this.setState({ places: res.data }));
  }

  render() {
    console.log(this.state.places[0]);
    return (
      <Fragment>
        <Header />
        <section id='places'>
          <div className='container'>
            <Places places={this.state.places} />
          </div>
        </section>
      </Fragment>
    );
  }
}

Places. js

class Places extends Component {
  render() {
    return this.props.places
      .sort((a, b) => a.votos > b.votos)
      .map((place) => (
        <div className='row' key={place.id}>
          <div className='col-lg-4'>
            <Card key={place.id} place={place} />
          </div>
        </div>
      ));
  }
}

Я даже пытался использовать sort (), но я не знаю, как выбрать конкретное поле для использования в качестве ссылки для sort ()

Спасибо

Answer 1

Вместо a.votos> b.votos. Используйте a.votos - b.votos.

class Places extends Component {
  render() {
    return this.props.places
      .sort((a, b) => a.votos - b.votos)
      .map((place) => (
        <div className='row' key={place.id}>
          <div className='col-lg-4'>
            <Card key={place.id} place={place} />
          </div>
        </div>
      ));
  }
}

Вот еще немного информации от MDN:

• Если предоставляется функция CompareFunction, все не определены элементы массива сортируются в соответствии с возвращаемым значением функции сравнения (все неопределенные элементы сортируются в конец массива, без вызова метода compareFunction). Если a и b - это два сравниваемых элемента, то:

• Если compareFunction (a, b) возвращает меньше 0, сортируйте a по индексу ниже, чем b (т. е. a на первом месте).

• Если compareFunction (a, b) возвращает 0, оставьте a и b неизменными относительно друг друга, но отсортированные по ко всем различным элементам. Примечание: стандарт ECMAscript не гарантирует такого поведения, поэтому не все браузеры (например, версии Mozilla, датируемые как минимум 2003 годом) соблюдают это.

• Если сравнить функцию (a, b) возвращает больше 0, сортировка b по индексу ниже, чем a (т. е. b идет первым). Функция CompareFunction (a, b) всегда должна возвращать одно и то же значение, если в качестве двух аргументов указана определенная пара элементов a и b c. Если возвращаются противоречивые результаты, порядок сортировки не определен.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

Вы не можете использовать> или <войти в сортировку. Поскольку сортировка ожидает, что число будет возвращено на каждой итерации. Для получения дополнительной информации, пожалуйста, прочитайте документацию MDN, </p>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

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

.sort((a, b) => a.votos - b.votos)

Если ваше свойство голосования является строковым, вы можете использовать следующий троичный код оператора, например,

.sort((a, b) => a.votos > b.votos ? 1 : -1)

Answer 3

Вы были недалеко от этого. sort ожидает ожидаемые числа, а не логические значения: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

.sort((a, b) => {
  if (a.votos > b.votos) {
      return 1
  }
  if (a.votos < b.votos) {
      return -1
  }

  // they are equal
  return 0
  })

Если votos является целым числом, вы можете просто вернуть a.votos - b.votos, например:

.sort((a, b) => a.votos - b.votos)