-1
votes

Mise à jour de l'état qui est une matrice avec les données provenant du composant parent

J'ai des données provenant du parent comme des accessoires et j'ai besoin de créer une option qui est une gamme d'objets à l'aide des données provenant du parent. Voici les données provenant du parent comme des accessoires xxx pré>

ce que j'ai besoin de créer quelque chose comme ça, mais dans mon état p>

   `this.state={
             options:[]
      }`

javascript reactjs

0 commentaires

3 Réponses :

1
votes

Vous pouvez utiliser Carte a >

Vous pouvez garder d'abord, seconde, et ainsi de suite sur code> dans un tableau pour obtenir la propriété de valeur dans la sortie. p>

alors ici l'idée est de boucler les clés de Data Code> Objet et vérifiez l'index code> de la touche CODE> s'il s'agit d'une matrice de valeurs, nous ajoutons 1 à celui-ci (puisque l'indexation de la matrice Démarrer de 0) et si non nous ajoutons 0 Code> p>

p>



let data={ option1: "First",option2: "Second",option3: "Third",option4: "Fourth" }

let values = ['First','Second','Third', 'Fourth']

let op = Object.keys(data).map(e=>{
  let val = values.indexOf(data[e])
  return {
    label: e,
    value: val !==-1 ? val+1 : 0
  }
})

console.log(op)

2 commentaires

Où avez-vous mis l'état?

@Dixitkumar Cet exemple couvre la conversion des données au format souhaité. Maintenant, vous pouvez utiliser op dans setstate facilement.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     J'espère que votre composant parent ressemble au ci-dessous:  xxx  pré> 
 et en enfant, vous obtiendrez vos données comme cela.Props.data, le moyen possible de l'obtenir dans l'état est  statique GetderiveStateFromProps  Code>, si vous devez effectuer des effets secondaires, vous pouvez utiliser  composantDidUpdate  code>  p> 
 ci-dessous est le composant enfant:  P> 
export default class Child extends React.Component {
  constructor() {
    super();
    this.state = {
      options: []
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
        let { data } = nextProps;
        let options = Object.keys(data).reduce((acc, curr) => {
            return [...acc, { label: data[curr], value: curr.replace( /^\D+/g, '') }]
    }, []);
        //or
        /*
        let options= Object.keys(nextProps.data).map((key, index) => ({label: nextProps.data[key], value: index}))};
        */
        return { options };
  }

  render() {
    return (
    this.state.options.map(item => <p key={item.value}>{item.label}</p>)
    );
  }
}

                                

                                                                    
                                    
                                    
                                        3 commentaires
                                        
                                                                                            
                                                    C'est la pire utilisation de  array.map  vient de renvoyer l'objet.  .map  renvoie un tableau par défaut                                                

                                                
                                                                                            
                                                    Je ne vois pas l'état d'être changé nulle part.                                                
                                                
                                                                                            
                                                    @Dixit Kumar Avez-vous vérifié ma réponse?                                                
                                                
                                                                                    

                                    

                                                            

                        

                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous pouvez utiliser  objet.entries  code> 
  p> 


let data={ 
   option1: "First",
   option2: "Second",
   option3: "Third",
   option4: "Fourth" 
}

const options = Object.entries(data).map(arr=> ({
       label: arr[1],
       value: arr[0].replace( /^\D+/g, '')
   }))

console.log(options)

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Où définissez-vous l'état?                                                
                                                
                                                                                            
                                                    Cela dépend de votre cas. Vous pouvez le faire dans le constructeur lorsque le composant initialise ou réagir des méthodes de cycle de vie.


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO