Je suis nouveau pour réagir. J'ai besoin de passer un tableau à un autre component via props mais j'ai un problème

dans Component1

this.state={
   data:[], //some values inside both it
   col:[]
    }

<Component2 data={[...this.state.data]} col={[...this.state.col]}/>

dans Component2

constructor(props){
    super(props)

    this.state = {
        data:[...this.props.data],
        col:[...this.props.col],

    }
    console.log(this.state.data+' inside state')
}

Quand je console.log j'obtiens la sortie ci-dessous

[Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [Objet Objet], [objet objet], [objet objet], [objet objet], [objet objet], [objet objet], [objet objet], [objet objet] état intérieur

L'un de mes tableaux contient 17 éléments mais pourquoi je ne reçois pas les données réelles? y a-t-il une erreur de syntaxe dans mon code?

0
user11074107 5 mai 2020 à 15:37

3 réponses

Meilleure réponse

Dans vos deux composants, vous ne devriez pas avoir à utiliser la syntaxe d'extraction / déstructuration. Au lieu de cela, attribuez simplement les valeurs telles qu'elles sont.

Exemple:

Composant 1

this.state={
   data:[], //some values inside both it
   col:[]
}

<Component2 data={this.state.data} col={this.state.col}/>

Composant 2

constructor(props){
    super(props)

    this.state = {
        data: this.props.data,
        col: this.props.col,

    }
    // Also you were casting to a string here, just pass the data as second parameter to log it.
    console.log('inside state', this.state.data)
}
2
segFault 5 mai 2020 à 12:51
com 1:

     <Component2 data={this.state.data} col={this.state.col} />

com 2: 

    constructor(props){
        super(props)

        this.state = {
            data:this.props.data,
            col:this.props.col,

        }
        console.log(this.state.data + ' inside state');
        console.log(this.state.col + ' inside state');
    }
1
Sugumar K 5 mai 2020 à 12:47

La documentation React indique explicitement de ne pas définir l'état à partir des accessoires, utilisez plutôt les accessoires directement. C'est à cela qu'ils servent.

0
Harshit Agarwal 5 mai 2020 à 13:03