reverse() 不适用于 map() 组件状态（ Firebase ）答案

【问题标题】：reverse() not working on map() Component state ( Firebase )reverse() 不适用于 map() 组件状态（ Firebase ）
【发布时间】：2018-04-27 23:27:37
【问题描述】：

1. reverse() 在子组件上无法正常工作

我在一个组件上有这个状态

this.state = {
    score_board_data:[]
}

以及下面的componentDidMount生命周期

componentDidMount(){

    const tempArray = this.state.score_board_data

    this.dataBase.orderByChild("player_score").on('child_added', snap =>{
        tempArray.push({
            player_score: snap.val().player_score,
            player_name: snap.val().player_name
        });
        this.setState({score_board_data:tempArray});
     });
}

当我在状态上使用 map() 函数时

this.state.score_board_data.map((player,i)=>{
    return(
        <tr key={i}>
              <td>{player.player_name}</td>
              <td>{player.player_score}</td>
        </tr>
    )
});

我根据这个得到排序：

.orderByChild("player_score")

看起来像这样（ 125, 150, 150, 150, 150, 150, 175, 225, 300, 325 )

现在我想反转它，所以我像这样在map()函数上使用reverse()方法

this.state.score_board_data.reverse().map( ....

我明白了 ( 325, 225, 150, 150, 150, 125, 150, 150, 175, 300) .....这根本没有逆转：D

警告：只能更新已安装或已安装的组件。这通常意味着您在未安装的组件上调用了 setState、replaceState 或 forceUpdate。这是无操作的。

2。 componentWillUnmount 困境。

我有一个使用 Google Firebase 的父组件

//child
this.app = firebase.initializeApp(DB_CONFIG);
this.database = this.app.database().ref().child("numbers");

我将数据库引用作为道具传递给子组件

//child props from parent 
dataBase={this.database}

我使用 react 路由器从父级导航到子级并返回...

但是当我在父组件的数据库中添加一个元素并使用路由器到达使用与父组件相同的数据库引用的子组件时，我得到了这个错误......

警告：只能更新已安装或已安装的组件。这通常意味着您在未安装的组件上调用了 setState、replaceState 或 forceUpdate。这是无操作的。

我想我需要在子 componentWillUnmount() 中添加一些代码以从中删除数据库....遗憾的是我不知道如何

//child
componentWillUnmount(){
}

我在谷歌和这里查了一下，但没弄明白

【问题讨论】：

为什么不在 Firebase 查询中按降序排列数据？

标签： javascript json reactjs firebase react-router

【解决方案1】：

Array#reverse() 确实将数组反转到位，例如Array#sort()。

因此，您不仅要反转 map() 创建的输出，还要反转输入 this.state.score_board_data。然后你push() 300 到 (reversed) 数组。

解决方案：更改调用函数的顺序

this.state.score_board_data.map(...).reverse()

【讨论】：