在react中，可以利用setState()來修改組件的狀態(tài)，setState()是用于更新組件狀態(tài)state的方法，該方法可以對組件state的更改排入隊列，也可獲取最新的狀態(tài)，語法為“setState(updater,[回調(diào)函數(shù)])”。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中怎么修改組件狀態(tài)

在 React 中不能直接修改組件的狀態(tài)，需要通過 setState() 來進行修改

在react中，setstate是用于更新組件狀態(tài)state的方法；setState()將對組件state的更改排入隊列，并通知React需要使用更新后的state重新渲染此組件及其子組件，語法為“setState(對象,[回調(diào)函數(shù)])”。

語法：

setState(updater[, callback])

updater 更新器

callback 更新后執(zhí)行的回調(diào)函數(shù)

修改狀態(tài)

比如想要將 state 中的 content 值修改為 ‘香香’

state = {   content: '大熊' }

通過直接修改的方式并不能觸發(fā)視圖的更新:

this.state.content = '香香'

需要通過 setState 來進行修改：

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

獲取最新的狀態(tài)值

因為 setState() 是異步的，所以在修改狀態(tài)后不一定能獲取到最新的值，如果想要獲取最新的狀態(tài)值可以為 setState() 提供一個回調(diào)函數(shù)，在狀態(tài)更新后會去執(zhí)行這個回調(diào)，可以在回調(diào)函數(shù)中獲取最新的狀態(tài)

示例：

this.setState({   content: '香香' }, () => {   // 通回調(diào)獲取最新的狀態(tài)   console.log(this.state.content) })

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

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

推薦學習：《react視頻教程》