2
votes

Que signifie l'instruction const {tz, msg} = this.state; signifie dans le code ci-dessous?

L'utilisation de ceci me semble toujours déroutante. Comme dans le code source ci-dessous. Quelqu'un peut-il expliquer ce que signifie l'instruction const {tz, msg} = this.state; signifie dans le code ci-dessous?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTime: null, msg: 'now', tz: 'PST'
    }
  }

  getApiUrl() {
    **const {tz, msg} = this.state;**
    const host = 'https://andthetimeis.com';
    return host + '/' + tz + '/' + msg + '.json';
  }

export default App;

javascript react-native ecmascript-6 expo react-native-fetch-blob

0 commentaires

4 Réponses :

0
votes

Cela signifie que vous avez un état qui a deux paires de valeurs clés comme tz et msg

0 commentaires

1
votes

const {tz, msg} = this.state; équivaut à

const tz = this.state.tz;
const msg = this.state.msg;

Il s’appelle ES6 Destructuring Assignment . Fondamentalement, cela réduira les lignes de code. Ce sera bien si vous pouvez examiner d’autres fonctionnalités ES6 .

4 commentaires

Cela m'a paru assez convaincant même si j'ai un autre doute.

Dans une classe antérieure juste au-dessus de cet exemple, ils ont défini tz et msg d'une autre manière. `` `` La classe d'exportation TimeForm étend React.Component {constructeur (props) {super (props); this.fetchCurrentTime = this.fetchCurrentTime.bind (this); this.handleFormSubmit = this.handleFormSubmit.bind (this); this.handleChange = this.handleChange.bind (this); const {tz, msg} = this.props; this.state = {tz, msg}; } `` `

C'est pareil. Affectation de destruction ES6.

Cela a aidé. Je vous remercie

0
votes

Cela s'appelle Object Destructuring en Javascript. Vous pouvez l'utiliser avec Object et Arrays.

Like.

const tz = this.state.tz
const msg = this.state.msg

Pour en savoir plus, cliquez ici https://javascript.info/destructuring-assignment .

Donc, dans votre cas, c'est

const {tz, msg} = this.state

est similaire à y accéder en tant que

For Array

const [a, b] = [10, 20];

For Object

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

2 commentaires

Ah d'accord. Mais pourquoi quelqu'un réaffecterait-il des valeurs au titre, à la largeur et à la hauteur déjà définis?

Nous ne le réaffectons pas. Ce sont les propriétés de l'objet, nous y accédons directement en utilisant la déstructuration. Imaginons que vous ayez un objet de réponse HTTP et que vous souhaitiez en récupérer name . Vous utiliserez simplement const {name} = response .

1
votes

C'est ce qu'on appelle la Déstructuration d'objets . Il s'agit de la méthode es6.

La syntaxe d'affectation de déstructuration est une expression JavaScript qui permet de décompresser les valeurs des tableaux, ou les propriétés des objets, en variables distinctes.

ANCIENNE MÉTHODE

const obj = {a:1, b:2, c:3};

const { a, b, c } = obj;

console.log("value of a is "+ a);
console.log("value of b is "+ b);
console.log("value of c is "+ b);

var obj = {a:1, b:2, c:3};

var a = obj.a;
var b = obj.b;
var c = obj.c;

console.log("value of a is "+ a);
console.log("value of b is "+ b);
console.log("value of c is "+ b);

vous pouvez obtenir plus d'informations sur la déstructuration ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment a >

0 commentaires