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

我正在学习React JS，为此我复制了一个用PHP开发的网站。我到了某一点，一个问题出现了，我在我的互联网搜索中找不到。我正在使用Axios从数据库中获取数据，并将其显示在前端。结果是我创建了一个状态，并使用map（）创建了一个循环，到目前为止还不错，但是我想按照map（）返回的值对这个结果进行排序

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

遵循代码

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>
    );
  }
}

类应用程序扩展组件{
状态={
地点：[]
};
componentDidMount（）{
axios
.get（'http://localhost:1337/places/')
.then（（res）=>this.setState（{places:res.data}））；
}
render（）{
console.log（this.state.places[0]）；
返回(
);
}
}

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>
      ));
  }
}

类放置扩展组件{
render（）{
归还这个道具
.sort（（a，b）=>a.votos>b.votos）
.map（（地点）=>(
));
}
}

我甚至尝试使用sort（），但我不知道如何选择一个特定字段作为sort（）的引用

---

谢谢

你离它不远了。排序要求返回数字，而不是布尔值：

---

你离它不远。排序要求返回数字，而不是布尔值：

---

而不是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>
      ));
  }
}

类放置扩展组件{
render（）{
归还这个道具
.sort（（a，b）=>a.votos-b.votos）
.map（（地点）=>(
));
}
}

以下是来自MDN的更多信息：

• 如果提供了compareFunction，则所有未定义的数组元素都将根据compare函数的返回值进行排序（所有未定义的元素都将排序到数组的末尾，而不调用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）必须始终返回相同的值。如果返回不一致的结果，则未定义排序顺序

---

而不是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>
      ));
  }
}

类放置扩展组件{
render（）{
归还这个道具
.sort（（a，b）=>a.votos-b.votos）
.map（（地点）=>(
));
}
}

以下是来自MDN的更多信息：

• 如果提供了compareFunction，则所有未定义的数组元素都将根据compare函数的返回值进行排序（所有未定义的元素都将排序到数组的末尾，而不调用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）必须始终返回相同的值。如果返回不一致的结果，则未定义排序顺序

---

您不能使用>或<登录排序。As sort期望针对每个迭代返回一个数字。有关更多信息，请阅读MDN文档

若投票属性为number，则可以使用以下代码。它将按升序对数组进行排序

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

如果投票属性为string，则可以使用如下三元运算符代码：

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

---

您不能使用>或<登录排序。As sort期望针对每个迭代返回一个数字。有关更多信息，请阅读MDN文档

若投票属性为number，则可以使用以下代码。它将按升序对数组进行排序

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

如果投票属性为string，则可以使用如下三元运算符代码：

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

---

a.votos

？那是打字错误吗？我看到你之前提到的

我有一个名为voces

的字段返回。Chenxsan为了方便起见，这只是用我的语言（葡萄牙语）翻译投票。对不起，

a.votos

？那是打字错误吗？我看到你之前提到的

我有一个名为voces

的字段返回。Chenxsan为了方便起见，这只是用我的语言（葡萄牙语）翻译投票。对不起，嗨，凯勒。使用a.votos-b.votos进行排序，但是我想从最大到最小，如果我改变顺序，它会工作吗？b类投票-a类投票？谢谢你的回答。是的，用b票-a票会把它颠倒过来。很高兴它成功了。嗨，凯勒。使用a.votos-b.votos进行排序，但是我想从最大到最小，如果我改变顺序，它会工作吗？b类投票-a类投票？谢谢你的回答。是的，用b票-a票会把它颠倒过来。很高兴它成功了。谢谢你，萨尔明。I u