問題：(javascript)初學(xué)React，setState后獲取到的thisstate沒變，還是初始state？
描述:

?

getInitialState(){return {data:[]};},componentDidMount(){var data = [ { author: "Pete Hunt", text: "This is one comment" },{ author: "Jordan Walke", text: "This is *another* comment" } ];(function(data){this.setState({data:data});console.log(this.state.data);}).call(this,data);},

為什么log里打出來的data是[]呢？

this.setState 是在 render 時(shí), state 才會(huì)改變調(diào)用的, 也就是說, setState 是異步的. 組件在還沒有渲染之前, this.setState 還沒有被調(diào)用.這么做的目的是為了提升性能, 在批量執(zhí)行 State 轉(zhuǎn)變時(shí)讓 DOM 渲染更快.

另外, setState 函數(shù)還可以將一個(gè)回調(diào)函數(shù)作為參數(shù), 當(dāng) setState 執(zhí)行完并且組件重新渲染之后. 這個(gè)回調(diào)函數(shù)會(huì)執(zhí)行, 因此如果你想查看通過 setState 改變后的 state, 可以這樣寫:

this.setState({myState: nextState}, ()=>{console.log(this.state.myState)})

---

解決方案1:

React?的 setState 是異步執(zhí)行的，所以你后面立即 console 是還沒改變狀態(tài)， setState 函數(shù)接受兩個(gè)參數(shù)，一個(gè)是一個(gè)對(duì)象，就是設(shè)置的狀態(tài)，還有一個(gè)是一個(gè)回調(diào)函數(shù)，就是設(shè)置狀態(tài)成功之后執(zhí)行的，你可以這樣：

(function(data){var that = this;this.setState({data:data}, function () {console.log(that.state.data);}); }).call(this,data);

?

解決方案2:

不能立即 console.log(this.state.data);的，你可以在 render方法里取

解決方案3:

善用官方文檔：

void setState(function|object nextState,[function callback] )

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

所以正確做法是

this.setState(Object.assign({}, { data }),() => console.log(this.state) )

總結(jié)

以上是生活随笔為你收集整理的初学React，setState后获取到的thisstate没变，还是初始state？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。