将结果映射到invert ReactJS

Question

我想解释一下我今天的问题。

在下面的代码中，一切工作正常，

我的问题如下所示，我的地图显示了下面的结果1 2 3 4 5 ect，而我希望以另一种方式读取，这样我就可以在第一个显示我的bbd的最后一个结果，所以在5 4 3 2 1 ect上

 import React, { Component } from 'react';
 import { CardText,  Col, Row, } from 'reactstrap'
 import axios from 'axios'

const entrypoint = process.env.REACT_APP_API_ENTRYPOINT + '/api';

class HistoriqueForAdmin extends Component {
 constructor(props) {
   super(props);
   this.state = {
     data: [],
   };
 }

getRandom = async () => {

    const res = await axios.get(
        entrypoint + "/alluserpls"
    )
    this.setState({ data: res.data })
 }
 componentDidMount() {
    this.getRandom()
 }
 render() {
    let datas = this.state.data.map(datass => {
        return (
            <div>
              <Col sm="12" key={datass.id}>

                        <CardText>{datass.totalComplet}€</CardText>
                        <CardText  
                </Col>  
            </div>
        )
    })
      return (       
            <div>
              {datas}
            </div>
      )
   }
 }  
export default HistoriqueForAdmin

Answer 1

您可以使用reverse()方法完成此操作，如下所示：

this.state.data.reverse().map(...)

演示：

reverse()方法就地反转数组。第一个数组元素成为最后一个，最后一个数组元素成为第一个。

​

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// Output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// Output: "array1:" Array ["three", "two", "one"]

​

Answer 2

在映射前对数组使用reverse函数

let datas = this.state.data.reverse().map(datass => {
        return (
            <div>
              <Col sm="12" key={datass.id}>

                        <CardText>{datass.totalComplet}€</CardText>
                        <CardText  
                </Col>  
            </div>
        )
    })

Answer 3

使用js方法reverse()

let datas = this.state.data.reverse().map(datass => {
 return (
  <div>
   <Col sm="12" key={datass.id}>
    <CardText>{datass.totalComplet}€</CardText>
    <CardText  
   </Col>  
  </div>
 )
})