¿Por qué reaccionar no actualiza el estilo en setState? El color del texto no se actualiza a verde con la función setState, permanece azul.
class Practice extends Component { state = { count: 0, color: "blue" } style = { color: this.state.color } handleIncrement = () => { this.setState({ count: this.state.count}); this.setState({ color: "green"}); } render() { return( <div> <h1 style={this.style}> The color in this state is {this.state.color}. The number in count is {this.state.count}. <button onClick={this.handleIncrement} > Increment </button> </h1> </div> ); } }
La información sobre cómo se debe representar un componente debe fluir solo desde el estado; esto le permitirá llamar a setState
para cambiar la forma en que se representa el componente. Poner una propiedad .style
en la instancia del componente en sí no funcionará; en su lugar, póngala en el estado.
En lugar de duplicar el color en diferentes partes del estado, colóquelo en un solo lugar, en el objeto de style
en el estado.
No estoy 100% seguro, pero probablemente también quieras
this.setState({ count: this.state.count});
ser - estar
this.setState({ count: this.state.count + 1 });
class Practice extends React.Component { state = { count: 0, style: { color: 'blue', } } handleIncrement = () => { this.setState({ count: this.state.count + 1 }); this.setState({ style: { ...this.state.style, color: "green" }}); } render() { return( <div> <h1 style={this.state.style}> The color in this state is {this.state.style.color}. The number in count is {this.state.count}. <button onClick={this.handleIncrement} > Increment </button> </h1> </div> ); } } ReactDOM.render(<Practice />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>
Si bien otras respuestas explican bien por qué su código no funciona en términos de estado React, noté una cosa que podría ser otro punto de confusión.
Cuando está asignando un valor a su propiedad de style
como este:
style = { color: this.state.color }
podría estar pensando que está asignando style.color
una "referencia" a la cadena a la que apunta this.state.color
. Lo que realmente sucede es que está asignando el valor "blue"
, porque la cadena es un tipo primitivo en JS. Entonces, después de hacer eso, su objeto de style
es realmente solo
{ color: "blue" }
Entonces, incluso si de alguna manera cambia el valor de this.state.color
, esto fundamentalmente no resultará en la actualización del valor de this.style.color
.
state
en la aplicación de reacción solo se actualizará usando setState
si y solo si ha incluido el estado en this.state
si está usando constructor
o propiedad de state
sin constructor
.
Demo en vivo
Debes crear un estado como:
state = { count: 0, style: { color: "blue" } };
y actualizar el estado como:
handleIncrement = () => { this.setState((oldState) => { return { count: oldState.count + 1, style: { ...oldState.style, color: "green" } }; }); };