L'erreur

Eh bien, cela fait des heures que j'essaie de savoir pourquoi j'ai cette erreur (uniquement lors de l'exécution de la construction):

error

L'architecture

Current directory is MySuperProject/src/Components/
Other non usefull files and directories are omitted.
.
├── Rentals                             
│   ├── modals
│   │   └── AddRentalModal.js            Not usefull here
│   ├── RentalListItem.js                https://pastebin.com/QSBncsHw
│   └── RentalsList.js                   https://pastebin.com/QufkCm85
├── Table
│   ├── Table.js                         https://pastebin.com/sq1jBPg1
└── Utils
    └── axios.util.js                    Not usefull here, axios setting

Environnement

  • NodeJS : 15.2.0
  • ReactJS : 16.13.1
  • Fil : 1.22.5

Ce que je fais

Dans mon fichier principal, RentalsList.js, je :

  1. Obtenez des données sur componentDidMount() à partir de /rentals sur mon API
  2. Mettre à jour l'état avec la réponse de l'API
  3. Affichez un composant (../Table/Table.js) en utilisant RentalListItem (./RentalListItem.js) comme élément pour cette table. Pour y parvenir, je passe RentalListItem en tant que prop dans TableItem nommé.

Le composant table s'appelle ainsi :

<Table
  columns={columns}            // Columns of my table
  datas={this.state.rentals}   // Data I got from my API
  TableItem={RentalListItem}   // TableItem which is imported from ./RentalListItem.js
/>

Voici un exemple de données renvoyées par l'API :

[
   {
      "name":"Some name",
      "ref":"AB01234",
      "availability_date": 1605237860,
      "cost": 123.45,
      "type": 0,
      "status": "Available",
      "_id":"5f667cb47919fda09795ccad",
      "address":{
         "number": 1,
         "way_type": "street",
         "way_name": "name",
         "postal_code": 12345,
         "city": "StackyCity",
         "_id":"5fadfc0e2add5eb934c497bb"
      },
      "added_by":{
         "firstname":"Me",
         "lastname":"Andmyself",
         "_id":"5fac8ca0b86ee219381252eb",
         "agency":{
            "ref": "CD56789",
            "name": "agency name",
            "email": "an@email.com",
            "_id":"5fac8f3db86ee219381252ec"
         }
      }
   }
]

Ma question

Je n'ai aucune erreur lors de son exécution en mode développement. En effet, je n'ai cette erreur qu'après avoir construit mon code (pour environnement de production)

Pourquoi ai-je cette erreur en mode production ?

Pistes de recherche

  • J'ai remarqué qu'après yarn build, mon composant RentalListItem est rendu en tant que fonction t(e) mais lorsque j'essaie de l'appeler en tant que fonction, il me dit que c'est une classe. Bien :)

  • Lorsque j'appelle directement RentalListItem en tant que composant sur RentalsList, je n'ai aucune erreur

  • Dans Table.js, this.props.TableItem semble être bien défini lorsqu'il est appelé

0
Aaron_Actu 13 nov. 2020 à 06:56

1 réponse

Meilleure réponse

Je soupçonne que c'est lié à ce JSX :

<this.props.TableItem index={index} ... />

Essayez de l'écrire comme ceci :

const TableItem = this.props.TableItem

...

<TableItem index={index} ... />

Je pense que votre code est JSX valide, mais il n'est pas courant d'utiliser une notation par points comme celle-ci, et ma théorie est qu'une partie du processus de construction le transforme de manière incorrecte. Afin de comprendre exactement ce qui cause cela, nous aurions besoin de savoir à quoi ressemble votre configuration de build.

1
Sidney 13 nov. 2020 à 04:14