Question

我正在使用Reifted-Redux构建一个内部消息传递应用程序，使用GiftedChat来显示我的消息。然而，它们总是按照错误的时间顺序排列。所以我想我会在视图中对数组进行排序。但是，它似乎没有工作，我无法弄清楚为什么。这就是它的样子（为简单起见缩短了）：

class MessageView extends React.Component {
  onSend (messages = []) {
    // ...
  }

  render () {
    return (
      <GiftedChat
        messages={this.props.messages}
        onSend={(messages) => this.onSend(messages)}
        user={{ _id: this.props._id }}
      />
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  var msgs = state.inboxReducer.myinbox.find(item =>
    item.owner_id === ownProps.navigation.state.params.owner_id).messages

  msgs = msgs.sort((a, b) => {
    return new Date(a.createdAt) - new Date(b.createdAt)
  })

  return {
    messages: msgs,
    _id: state.user._id
  }
}

export default connect(mapStateToProps, {})(MessageView)

这是一个消息数组的示例（从我的初始状态）：

[{
  _id: 1,
  text: 'Hey whats goin on mate?',
  createdAt: new Date(Date.UTC(2017, 10, 11, 11, 20, 0)),
  user: {
    _id: 1,
    name: 'John Lennon'
  }
},
{
  _id: 2,
  text: 'Just working on the next album.',
  createdAt: new Date(Date.UTC(2017, 10, 11, 11, 25, 0)),
  user: {
    _id: 2,
    name: 'Paul McCartney'
  }
},
{
  _id: 3,
  text: 'Great, I will be in the studio later.',
  createdAt: new Date(Date.UTC(2017, 10, 11, 11, 31, 0)),
  user: {
    _id: 1,
    name: 'John Lennon'
  }
}]

令我难以置信的是，如果我把它放在chrome调试控制台中，那么排序工作正常。事实上，我在不同的React组件中使用相同的精确排序来获取聊天收件箱的最新消息，这个正常工作。

const mapStateToProps = (state) => {
  return {
    inbox: state.inboxReducer.myinbox.map((x) => {
      let msg = x.messages.sort((a, b) => {
        return new Date(a.createdAt) - new Date(b.createdAt)
      }).slice(-1)[0]
      return ({ 
        _id: x._id,
        name: x.name,
        message: msg
      })
    })
  }
}

有没有人看到过Array.sort（）在某些React上下文中有效但在其他情况下无法工作的时间？

Answer 1

始终抵制在客户端/浏览器上进行排序或搜索的诱惑，因为您总会后悔。稍后您会有更高级的排序，或者无论出于何种原因，您最终都不得不把它扔掉。相信我。如果您需要对信息进行排序，请让DB执行此操作！很抱歉听起来很有说服力，但这对你来说确实是最好的答案。

Answer 2

尝试避免在react native中使用新的Date（）。而是使用我们这样的库来解决由它引起的许多问题。我遇到了类似的问题，我的排序在模拟器上有效，但在设备上却没有。

//DIDN'T WORK ON DEVICE
const sortedPointsByDate = filteredPoints.sort((a,b)=> new Date(b.logDate) - new Date(a.logDate))

//WORKED ON BOTH
const sortedPointsByDate = filteredPoints.sort((a,b)=> moment(b.logDate) - moment(a.logDate))

我建议尝试将所有新的Date（）实例替换为moment（）

Array.sort在控制台中工作，但在React Native应用程序中不起作用

2 个答案: