如何使用回调更新反应组件的状态？

状态在反应组件中是可变的。为了使 React 应用程序具有交互性，我们几乎在每个 React 组件中都使用了状态。状态用一些值初始化，并且基于用户与应用程序的交互，我们使用 setState 方法在某个时间点更新组件的状态。 setState 方法允许直接使用 JavaScript 对象更改组件的状态，其中键是状态的名称，值是该状态的更新值。通常我们会根据之前的状态更新组件的状态。在这些情况下，总是建议使用基于回调的方法更新状态，因为使用这种方法可以确保先前的状态完全更新，现在我们根据其先前更新的值更新状态。社区建议使用基于回调的方法来使用 setState 更新状态，因为它预先解决了许多将来可能发生的错误。

句法

this.setState(st => {
  return(
    st.stateName1 = state1UpdatedValue,
    st.stateName2 = state2UpdatedValue
  )
})

示例 1：此示例说明如何使用基于回调的方法更新状态

index.js：

应用程序.js：

Javascript

import React, { Component } from 'react'
 
class App extends Component{
  constructor(props){
    super(props)
    // initialize count state
    this.state = {count : 0}
    // bind this
    this.handleClick = this.handleClick.bind(this)
  }
 
  // function to run after click
  handleClick(){
    // changing state using callback
    this.setState(st => {
      // count is incremented +1 time
      // based on its previous value
      return st.count += 1
    })
  }
 
  render(){
    return(
      

        
Number : {this.state.count}
        
            Increment count
        
      
       
    )
  }
}
export default App

输出 ：

示例 2：

index.js：

Javascript

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(, document.querySelector('#root'))

应用程序.js：

Javascript

import React, { Component } from 'react'
 
class App extends Component{
  static defaultProps = {
    name : ['John', 'Alex', 'Bob']
  }
  constructor(props){
    super(props)
     
    // initialize count state
    this.state = {msg : 'Hi There', count:0}
    // bind this
    this.handleClick = this.handleClick.bind(this)
  }
 
  // function to run after click
  handleClick(){
    // changing state using callback
    this.setState(st => {
      return(
        st.msg = `${st.msg}, ${this.props.name[st.count]}`,
        st.count += 1
      )  
    })
  }
 
  render(){
    return(
      

        
Greetings!
         
 
{this.state.msg}
 
 
        
           Say greeting to employees!
        
      
       
    )
  }
}
export default App

输出 ：