Estoy comenzando con react native, y cuando uso una biblioteca llamada react native paper, me encuentro con una declaración donde se asigna el estado a un const como se muestra a continuación.

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

Al comenzar el método 'Renderizar', podría ver const {firstQuery} = this.state; ¿Podría alguien explicar por qué el estado se está asignando a una constante llamada 'firstQuery', e incluso si tiene una razón, cómo la asignación correlacionará correctamente la propiedad 'firstQuery' dentro del objeto de estado con la constante?

Gracias por adelantado. El código de muestra es de https://callstack.github.io/react -native-paper / searchbar.html # value

0
Aby 30 dic. 2019 a las 18:41

2 respuestas

La mejor respuesta

Esa sintaxis no es React ni React Native. Es solo la sintaxis de Javascript, llamada desestructuración.

const { firstQuery } = this.state;

Es equivalente a

const firstQuery = this.state.firstQuery;

Solo una sintaxis de acceso directo de mano corta, ¿ves 2 firstQuery s ? La gente simplemente no quiere duplicación en el código, así que lo inventaron.


Vea el fragmento vanilla javascript a continuación:

const object = {
  name: 'Aby',
  age: 100,
}

const { name, age } = object;
// instead of 
// const name = object.name;

console.log(name, age);
console.log(object.name, object.age);

//=========================================
// imagine:
const obj = {
  veryLongPropertyNameToType: 420
}

const { veryLongPropertyNameToType } = obj;
// instead of
// const veryLongPropertyNameToType = obj.veryLongPropertyNameToType;
4
Loi Nguyen Huynh 30 dic. 2019 a las 15:57

Como otra respuesta mencionada, es solo la sintaxis de JavaScript, también conocida como desestructuración. Si se siente confundido y desea utilizar la sintaxis JavaScript "vainilla", puede consultar a continuación.

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={this.state.firstQuery} // <<<<<<<<<<< LOOK HERE
      />
    );
  }
}
1
Isaac 30 dic. 2019 a las 16:09