如何在 React 中反转数组 [重复]答案

【问题标题】：How to reverse an Array in React [duplicate]如何在 React 中反转数组 [重复]
【发布时间】：2018-04-12 12:38:01
【问题描述】：

如何在反应中反转数组？我尝试使用 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>
        )
    }
}

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

你应该先从你的状态得到data，然后在上面应用reverse()，然后映射反向数组：

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

【讨论】：

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

【解决方案2】：

此问题已在此处解决，请访问以下链接：

REACT Reverse an array

【讨论】：