5.4 KiB
5.4 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036173 | Set State with this.setState | 6 | false | Establecer estado con this.setState |
Description
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 ({React espera que nunca modifique el
nombre de usuario: 'Lewis'
});
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
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'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