如何在 ReactJS 中循环的映射中对值进行排序

Question

我正在学习 React JS，为此我正在复制一个我用 PHP 开发的网站。我到了一定程度，出现了一个我在互联网搜索中找不到的问题。我正在使用 Axios 从数据库中获取数据并将其呈现在前端。结果我创建了一个State并使用map()创建了一个循环，到目前为止一切都很好，但是我想通过map()返回的值来排序这个结果。

我返回了一个名为 votes 的字段，它是我想用它来对结果进行排序的数字。

遵循代码

App.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

你离它不远。 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 是 int，您可以像这样返回 a.votos - b.votos：

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

Answer 2

您不能使用 > 或

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

如果 votes 属性是数字，你可以使用下面的代码。它将按升序对您的数组进行排序。

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

如果你的 votes 属性是字符串，你可以像这样使用下面的三元运算符代码，

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

Answer 3

而不是 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 标准不保证这种行为，因此，并非所有浏览器（例如，至少可以追溯到 2003 年的 Mozilla 版本）都尊重这一点。

• 如果 compareFunction(a, b) 返回大于 0，则将 b 排序到低于 a 的索引（即 b 排在第一位）。 当给定一对特定的元素 a 和 b 作为其两个参数时，compareFunction(a, b) 必须始终返回相同的值。如果返回不一致的结果，则排序顺序未定义。

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