this.setState({count: count+1} clic varias veces solo actualizará el conteo una vezthis.setState({count: this.setState.count}) Cada clic actualiza el conteo class Demo extends React.Component { state = {count: 0}; render() { const {count} = this.state; return <button onClick={() => this.setState({count: count+1})}>count</button> } shouldComponentUpdate(){ return false; } }react@16.8.4Porque sus alcances son diferentes.
this.setState({count: this.setState.count+1}) las acciones de carga state.count número y reasignación están en el mismo ámbito de evento onClick.
Pero la variable de count en this.setState({count: count+1}) se define en el alcance superior de render() y el evento onClick solo recibe el count como variable de nivel superior. Por lo tanto, la función render() solo se ejecuta una vez, por lo que count en render() solo se inicializa una vez (loading state.count solo una vez); cuando hace clic en el botón, solo se ejecutará el alcance del evento onClick (las acciones de reasignación se ejecutarán varias veces), en lugar del alcance render() . Es por eso que la variable de count en el evento onClick siempre será 0.
Hay un ejemplo simple equivalente a su caso:
state={count:0} function upperLevel() { let {count} = state; function downlevel() { state = { count: count + 1 } console.log(state); } downlevel(); downlevel(); downlevel(); } upperLevel() Si nos movemos let {count} = state; en downlevel() entonces el número aumentará.
state = {count: 0} function upperLevel() { //let {count} = state; function downlevel() { let {count} = state; state = {count: count + 1 } console.log(state); } downlevel(); downlevel(); downlevel(); } upperLevel()