react中怎麼修改組件狀態

在react中，可以利用setState()來修改元件的狀態，setState()是用於更新元件狀態state的方法，該方法可以對元件state的變更排入佇列，也可取得最新的狀態，語法為「setState(updater,[回呼函數])」。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中怎麼修改元件狀態

在React 中不能直接修改元件的狀態，需要透過setState() 來進行修改

在react中，setstate是用於更新元件狀態state的方法；setState()將對元件state的變更排入佇列，並通知React需要使用更新後的state重新渲染此元件及其子元件，語法為「setState(物件,[回呼函數]) 」。

語法：

setState(updater[, callback])

updater 更新器

callback 更新後執行的回呼函數

##修改狀態

例如想要將state 中的content 值修改為'香香'

state = {
  content: '大熊'
}

透過直接修改的方式並不能觸發視圖的更新:

this.state.content = '香香'

需要透過setState 來進行修改：

this.setState({
  content: '香香'
})

取得最新的狀態值

因為setState() 是異步的，所以在修改狀態後不一定能取得最新的值，如果想要取得最新的狀態值可以為setState() 提供一個回呼函數，在狀態更新後會去執行這個回調，可以在回呼函數中取得最新的狀態

範例：

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

setState()的第一個參數也可以是函數，這個函數接收兩個參數：第一個參數為更新前的狀態值，第二個參數為props（可取得父級元件傳遞的資料）；當修改狀態時涉及到前一個狀態值時就可以使用這種形式。

this.setState((state, props) => {
  console.log(state.content, props)
  // 返回一个对象
  return {
    content: prev.content + '香香'
  }
})

推薦學習：《

react影片教學》
#

以上是react中怎麼修改組件狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！