Array.sort fonctionne dans la console mais pas dans l'application React Native

Question

Je construis une application de messagerie interne avec React-Redux en utilisant GiftedChat pour afficher mes messages. Cependant, ils sont toujours dans le mauvais ordre chronologique. Je me suis donc dit que j'allais trier le tableau dans ma vue. Cependant, cela ne semble pas fonctionner et je n'arrive pas à comprendre pourquoi. Voici à quoi cela ressemble (raccourci pour plus de simplicité) :

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)

Voici un exemple de ce à quoi ressemble le tableau des messages (à partir de mon état initial) :

[{
  _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'
  }
}]

Ce qui m'étonne, c'est que si je mets cela dans la console de débogage de chrome, le tri fonctionne bien. ET j'utilise en fait le même tri dans un autre composant React pour obtenir le dernier message de la boîte de réception du Chat et ceci travaux très bien.

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
      })
    })
  }
}

Quelqu'un a-t-il déjà vu un moment où un Array.sort() fonctionnait dans certains contextes React mais pas dans d'autres ?

Answer 1

Résistez toujours à la tentation de faire des tris ou des recherches sur le client/navigateur, car vous le regretterez toujours. Plus tard, vous aurez un tri plus avancé ou, pour une raison ou une autre, vous finirez par devoir tout jeter. Faites-moi confiance. Si vous avez besoin de trier des informations, laissez la BD le faire ! Désolé de paraître moralisateur, mais c'est vraiment la meilleure réponse pour vous.

Answer 2

Essayez d'éviter d'utiliser new Date() en react native. Utilisez plutôt des bibliothèques telles que nous moment qui ont résolu de nombreux problèmes causés par cette méthode. J'ai eu un problème similaire, mon tri fonctionnait sur le simulateur mais pas sur l'appareil.

//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))

Je suggère d'essayer de remplacer toutes les nouvelles instances de Date() par moment()