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. 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. MyComponent
debe MyComponent
con el par de valores clave { name: Initial State }
.'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "Initial State", "The state of MyComponent
should initialize with the key value pair { name: Initial State }
.");'
- text: MyComponent
debe hacer un encabezado h1
.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "MyComponent
should render an h1
header.");'
- text: El encabezado h1
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
header should contain text rendered from the component's state."); };'
- text: ¡Llamar al método handleClick
en MyComponent
debe establecer la propiedad de nombre en el estado para igualar React Rocks!
.
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 handleClick
method on MyComponent
should set the name property in state to equal React Rocks!
."); };'
```