如何在 React 中反转数组

Wil*_*iam 9 javascript node.js reactjs

如何在反应中反转数组?我尝试使用 this.state.data.maps.reverse 但它不起作用。提前致谢!

import React, { Component } from 'react';

export default class Slideshows extends Component {
    constructor(){
        super();
        this.state = {
            data:[
                { "id": "1", "name": 'Robert', "age": "21" },
                { "id": "2", "name": 'Sam', "age": "33" },
                { "id": "3", "name": 'Jerry', "age": "42" },
            ]
        }
    }
    render() {
        const reverseData = this.state.map((data, i) => {
            return (
                <li> {data.name} | {data.age} </li>
            )
        })
        return (
            <ul>
                {reverseData}
            </ul>
        )
    }
}
Run Code Online (Sandbox Code Playgroud)

asi*_*niy 10

你应该data先从你的状态中获取,然后应用reverse()它,然后映射反向数组:

    const reverseData = this.state.data.reverse().map((data, i) => {
        return (
            <li> {data.name} | {data.age} </li>
        )
    })
Run Code Online (Sandbox Code Playgroud)

  • 这是危险的,因为 Array.reverse() 直接改变状态并可能导致意外的副作用。 (5认同)
  • 既然我在这里得到了反对票,我想我会详细说明。您可以通过谷歌搜索来验证为什么您不想直接改变状态。如果您还查找 Array.prototype.reverse() 您还会发现它确实通过参考发生了变异 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/逆转 。您可以通过浅克隆(扩展运算符)进行复制来避免这种情况。如果您需要一个简单的深度克隆解决方案,请查看 lodash.deepClone()。FWIW“已经回答”的问题已经在答案中提到了这一点。 (2认同)