freeCodeCamp

5.4 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036173	Set State with this.setState	6	false		Establecer estado con this.setState

Description

Los desafíos anteriores cubrían el state componente y cómo inicializar el estado en el constructor . También hay una manera de cambiar el state del componente. React proporciona un método para actualizar el state componente llamado setState . Llama al método setState dentro de su clase de componente así: this.setState() , pasando un objeto con pares clave-valor. Las claves son las propiedades de su estado y los valores son los datos de estado actualizados. Por ejemplo, si almacenáramos un username de username en estado y quisiéramos actualizarlo, se vería así:

this.setState ({
nombre de usuario: 'Lewis'
});

React espera que nunca modifique el state directamente, en su lugar, siempre use this.setState() cuando ocurran cambios de estado. Además, debe tener en cuenta que React puede generar varias actualizaciones de estado por lotes para mejorar el rendimiento. Lo que esto significa es que las actualizaciones de estado a través del método setState pueden ser asíncronas. Hay una sintaxis alternativa para el método setState que proporciona una forma de solucionar este problema. Esto rara vez es necesario, pero es bueno tenerlo en cuenta. Por favor, consulte la documentación de React para más detalles.

Instructions

Hay un elemento de button en el editor de código que tiene un controlador onClick() . Este controlador se activa cuando el button recibe un evento de clic en el navegador y ejecuta el método handleClick definido en MyComponent . Dentro del método handleClick , actualice el state del componente usando this.setState() . Establezca la propiedad de name en state para que sea igual a la cadena React Rocks! . Haga clic en el botón y observe la actualización del estado renderizado. No se preocupe si no entiende completamente cómo funciona el código del controlador de clics en este momento. Está cubierto en los próximos desafíos.

Tests

tests:
  - text: 'El estado de <code>MyComponent</code> debe <code>MyComponent</code> con el par de valores clave <code>{ name: Initial State }</code> .'
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "Initial State", "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.");'
  - text: <code>MyComponent</code> debe hacer un encabezado <code>h1</code> .
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "<code>MyComponent</code> should render an <code>h1</code> header.");'
  - text: El encabezado <code>h1</code> representado debe contener texto representado desde el estado del componente.
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/<h1>TestName<\/h1>/.test(firstValue), "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state."); };'
  - text: ¡Llamar al método <code>handleClick</code> en <code>MyComponent</code> debe establecer la propiedad de nombre en el estado para igualar <code>React Rocks!</code> .
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "Before" }); return waitForIt(() => mockedComponent.state("name")); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state("name")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "Before" && secondValue === "React Rocks!", "Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>."); };'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Initial State'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // change code below this line

    // change code above this line
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

5.4 KiB Raw Blame History