0
163
VisualizaçõesLa variable de instancia de Javascript no se representó en el componente de clase React al llamar a setState
Un componente de clase de reacción se monta en el nodo raíz html. Tiene dos etiquetas de elemento reactivo h1 en su cuerpo. Un elemento h1 se representa directamente dentro del método de representación. Otro h1 se borra en la clase de componente React y se pasa a la función Render como una variable.
import React, { Component } from "react"; export default class Test extends Component { state = { count: 0, }; current_count = (<h1>current count is {this.state.count}</h1>); render() { return ( <> {this.current_count} <h1>current count is {this.state.count}</h1> <button onClick={() => { this.setState({ count: this.state.count + 1 }); }} > click me </button> </> ); } } Cuando hice clic en el botón, debería aumentar el count , solo el elemento de reacción h1 dentro de la función de procesamiento se actualizará con su contenido de estado.
La siguiente foto muestra la segunda etiqueta h1 que muestra que el recuento es 4 cuando hice clic en el botón 4 veces.
1 Respostas
Responde à pergunta0
Su current_count es una propiedad que se crea en el constructor, antes del montaje, y solo entonces. Su código actual es como
export default class Test extends Component { constructor() { this.state = { count: 0, }; this.current_count = (<h1>current count is {this.state.count}</h1>); }Y el constructor solo se ejecuta una vez.
Necesitará algún otro método para actualizarlo. La mejor manera sería generar solo el JSX en el procesamiento; tal vez tener una función en su lugar que devuelva el <h1> .
class Test extends React.Component { state = { count: 0, }; getCurrentCount() { return ( <h1>current count is {this.state.count}</h1> ); } render() { return ( <React.Fragment> {this.getCurrentCount()} <h1>current count is {this.state.count}</h1> <button onClick={() => { this.setState({ count: this.state.count + 1 }); }} > click me </button> </React.Fragment> ); } } ReactDOM.createRoot(document.querySelector('.react')).render(<Test />); <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>