亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

setState不會立即更新狀態

setState不會立即更新狀態

慕田峪4524236 2019-06-03 15:15:56
setState不會立即更新狀態我想問,為什么我的狀態不改變,當我做一個點擊事件。我在前面搜索過,我需要在構造函數中綁定onClick函數,但是狀態仍然沒有更新。這是我的密碼:import React from 'react';import Grid from 'react-bootstrap/lib/Grid';import Row from 'react-bootstrap/lib/Row';import Col from ' react-bootstrap/lib/Col';import BoardAddModal from 'components/board/BoardAddModal.jsx';import style from 'styles/boarditem.css'; class BoardAdd extends React.Component {     constructor(props){         super(props);         this.state = {             boardAddModalShow: false         }         this.openAddBoardModal = this.openAddBoardModal.bind(this);     }     openAddBoardModal(){         this.setState({ boardAddModalShow: true });// After setting a new state it still return a false value         console.log(this.state.boardAddModalShow);     }     render() {         return (             <Col lg={3}>                 <a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal}>                     <div className={[style.boardItemContainer,style.boardItemGray].join(' ')}>                         Create New Board                     </div>                 </a>             </Col>         )     }}export default BoardAdd
查看完整描述

4 回答

?
浮云間

TA貢獻1829條經驗 獲得超4個贊

你的狀態需要一些時間來變異console.log(this.state.boardAddModalShow)在狀態變異之前執行,您將得到前面的值作為輸出。因此,您需要在回調中將控制臺寫入setState函數。

openAddBoardModal(){
        this.setState({ boardAddModalShow: true }, function () {
             console.log(this.state.boardAddModalShow);
        });}

setState是異步的。這意味著您不能在一行上調用setState,并假定狀態在下一行發生了更改。

根據反應文檔

setState()不會立即變異this.state但是創建一個掛起的狀態轉換。存取this.state調用此方法后,可能會返回現有值。不能保證同步運行對setState的調用,調用可以批處理以獲得性能增益。

他們為什么要做setState異步

這是因為setState改變了狀態并導致重命名。這可能是一項昂貴的操作,使其同步可能會使瀏覽器無法響應。

因此,setState調用是異步的,并且是批處理的,以獲得更好的UI體驗和性能。


查看完整回答
反對 回復 2019-06-03
?
慕的地10843

TA貢獻1785條經驗 獲得超8個贊

因為setSatate是一個異步函數,所以您需要像這樣將狀態作為回調來安慰。

openAddBoardModal(){
    this.setState({ boardAddModalShow: true }, () => {
        console.log(this.state.boardAddModalShow)
    });}


查看完整回答
反對 回復 2019-06-03
?
慕容森

TA貢獻1853條經驗 獲得超18個贊

setState()并不總是立即更新組件。它可以對更新進行批次或將更新推遲到以后。這使得閱讀這個.在調用后立即狀態setState()潛在的陷阱。相反,使用componentDidUpdate或者是setState回調(setState(updater, callback)),其中任何一個都保證在應用更新后觸發。如果需要根據以前的狀態設置狀態,請閱讀下面有關更新器參數的內容。

setState()將始終導致重呈現,除非shouldComponentUpdate()返回假。如果正在使用可變對象,并且條件呈現邏輯無法在shouldComponentUpdate(),呼叫setState()只有當新狀態與以前的狀態不同時,才能避免不必要的重新呈現。

第一個參數是帶有簽名的更新器函數:

(state, props) => stateChange

state是對應用更改時的組件狀態的引用。它不應該直接變異。相反,更改應該通過基于狀態和道具的輸入構建一個新對象來表示。例如,假設我們希望通過pros.Step在狀態中增加一個值:

this.setState((state, props) => {
    return {counter: state.counter + props.step};});


查看完整回答
反對 回復 2019-06-03
  • 4 回答
  • 0 關注
  • 2042 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號