4
votes

Avertissement de la console Mobx

J'ai reçu ce message d'avertissement de Mobx.

[mobx.array] Tentative de lecture d'un index de tableau (0) qui est hors limites (0). Veuillez d'abord vérifier la longueur. Les indices hors limites ne seront pas suivis par MobX

"mobx": "^4.1.0",
"mobx-react": "^5.2.6",

Comment puis-je supprimer cet avertissement? Cependant, ce code ne pose aucun problème. Cela fonctionne bien.

J'utilise la fonction selectAllChecks par la fonction onChange.

const {
  deviceType,
  deviceTypeChecks
} = this.props.store.checks

<label className="mr10">
          <input
            type="checkbox"
            checked={deviceType.length === deviceTypeChecks.length}
            onChange={() =>
              selectAllChecks('deviceType', 'deviceTypeChecks')
            }
          />
          <span>All device type</span>
        </label>

Je dois la version 4 pour IE .

@observable checks = {
      deviceType: ['phone','laptop', ...],
      deviceTypeChecks: [],
      ...
    }

@action
selectAllChecks = (target, type) => {
     const targetChecks = []
     if (this.checks[target].length !== this.checks[type].length) {
        this.checks[target].forEach(el => targetChecks.push(el))
      }
     this.checks[type] = targetChecks
}

Existe-t-il une autre solution?

reactjs mobx mobx-react

6 commentaires

Devez-vous vérifier si this.checks [target] .length> 0 avant de comparer les longueurs? Il semble que vous lisiez un index avant que l'observable n'ait reconnu les nouvelles données, car la comparaison des longueurs ci-dessus pourrait toujours retourner true si le tableau comparé n'a collecté aucun élément. Je suis plus familier avec MST et n'ai pas beaucoup utilisé le mobx-react direct.

J'ai essayé de vérifier this.checks [target] .length comme vous l'avez dit. Mais l'avertissement est toujours d'actualité. Merci

Pouvez-vous montrer comment / où la fonction est utilisée?

veuillez vérifier le code modifié ci-dessus. J'utilise la fonction par événement onChange.

Il n'est pas lié aux checks obj, car ce n'est pas un tableau. Vérifiez où vous avez un tableau observable dans le code.

@felixmosh console.log (deviceType) renvoie un tableau observable.

5 Réponses :

0
votes

Que se passe-t-il si vous remplacez votre @action par ceci:

@action
selectAllChecks = (target, type) => {
      this.checks[type] = this.checks[target].map((value) => value);
}

Cela montre-t-il toujours l'erreur mobx hors limites ?

3 commentaires

C'est toujours arrivé. En fait, je me demande pourquoi c'est arrivé et pourquoi Mobx a déclenché l'avertissement.

Utilisez-vous l'objet de contrôles observables ailleurs dans votre code?

J'utilise un objet de chèques n'importe où.

0
votes

Il semble que vous essayez d'accéder à un élément d'un tableau observable, et cet élément n'existe pas. Vous avez deux tableaux observables, et l'un d'entre eux, deviceTypeChecks n'a aucun élément. Cependant, le code tel qu'il est semble correct. Y a-t-il un autre endroit dans votre code pour accéder à ce tableau?

0 commentaires

2
votes

Mobx peut rendre observable des objets dynamiques (qu'il ne connaît pas à l'avance )

mais si vous regardez l'objet dans le débogueur côté client (console.log (myObject)), vous pouvez voir que ce n'est pas un objet JS normal mais un objet Proxy de Mobx. Ceci est différent de l'observable des valeurs primitives comme les nombres et les chaînes.

Pour éviter ce type d'avertissement, vous pouvez utiliser la méthode toJS a > qui convertit un objet (observable) en une structure javascript.

Par exemple, ce code renvoie un avertissement

  import { toJS } from 'mobx';  
...
  autorun(
        () => {
          if (this.props.store.myObject !== null ) 
          {
            let myStruct = toJS(this.props.store.myObject);
            this.updateSomeUi(myStruct);;
          }
        }
    );

vous pouvez résoudre ce problème avec: p>

  autorun(
        () => {
          if (this.props.store.myObject !== null ) 
          {
            this.updateSomeUi(this.props.store.myObject);
          }
        }
    );

0 commentaires

0
votes

J'ai le même problème aujourd'hui, après avoir vérifié tout, j'ai trouvé que le problème est que j'ai défini le mauvais type de données, donc mobx ne peut pas le lire normalement.

le mauvais tableau défini:

exampleArr: types.array(types.model({
    dataOne: type.string,
    dataTwo: type.string   
}))

après l'avoir changé pour le bon type, cela fonctionne bien

exampleArr: types.array(types.model({
    dataOne: type.string,
    dataTwo: type.number   <-- this should be a string but I defined it as number
}))

0 commentaires

1
votes

Un autre conflit avec Flatlist lorsque la longueur de votre tableau de données est 3 ou 5 ou 7 et etc ... mais utilisé numColumns = {2} . Erreur d'avertissement numColumns = {1} résolue. Mais pour résoudre ce problème, utilisez la méthode Javascript slice

<FlatList
   data={ProductStore.dataFood.slice()} // added .slice()
   extraData={ProductStore.dataFood}
   refreshing={ProductStore.productsLoading}
   numColumns={2} // number 2 conflict when your array length is 3 or 5 or 7 and etc...
   renderItem={this._renderItemFood}
   keyExtractor={(item, index) =>
     index.toString()
   }
/>

0 commentaires