無法在組件中設置狀態

發生click事件時，狀態未設置爲CompOne內給定的值。它仍然顯示初始狀態和控制檯記錄舊狀態，即「你好」。無法在組件中設置狀態

var CompOne = React.createClass({ 

    getInitialState: function() { 
    return { 
     edit: "hello" 
    } 
    }, 

    editme: function() { 
    this.setState({ 
    edit: "there" 
    }) 
    console.log(this.state.edit) 
}, 

    render: function(){ 
    return (
     <div> 
     {this.props.name} 
     <button onClick={this.editme}>Edit</button> 
     </div> 
    ) 
    } 
}) 


var Pri = React.createClass({ 
    render: function() { 
    return (
     <div> 
     < CompOne name = "Anne"/> 
     < CompOne name = "Bob"/> 
     </div> 
    ); 
    } 
}) 

ReactDOM.render(<Pri /> , document.getElementById("root"));

來源

2016-11-22 Deke

功能setState不同步。這裏有一個關於這個從React documentation;

setState()不會立即發生變異this.state但創建一個掛起狀態轉變。調用此方法後訪問this.state可能會返回現有值。沒有保證setState的呼叫同步操作，並且呼叫可能會批處理以提高性能。

在人類而言，這意味着如果你打電話setState並試圖立即讀取狀態，狀態可以改變，也可能是相同的。

，可以使用的解決方案是一個回調傳遞給setState方法作爲第二個參數：

editme: function() { 
    this.setState({ 
    edit: "there" 
    }, function(){ 
     // this function would be invoked only when the state is changed 
     console.log(this.state.edit); 
    }); 
}

第二參數的目的相同的文檔文章中描述：

第二個參數是一個可選的回調函數，當setState完成且組件重新呈現時，將執行。

來源

2016-11-22 04:37:15 dotnetom

您需要使用回調函數setState因爲的setState需要時間來發生變異，你console.log得到以前一樣的語句是異步執行的狀態突變執行。

editme: function() { 
     this.setState({ 
     edit: "there" 
     }, function(){ 

     console.log(this.state.edit) 
     }) 
    },

var CompOne = React.createClass({ 
 
    
 
     getInitialState: function() { 
 
     return { 
 
      edit: "hello" 
 
     } 
 
     }, 
 
    
 
     editme: function() { 
 
     this.setState({ 
 
     edit: "there" 
 
     }, function(){ 
 
      
 
     console.log(this.state.edit) 
 
     }) 
 
    }, 
 
    
 
     render: function(){ 
 
     return (
 
      <div> 
 
      {this.props.name} 
 
      <button onClick={this.editme}>Edit</button> 
 
      </div> 
 
     ) 
 
     } 
 
    }) 
 
    
 
    
 
    var Pri = React.createClass({ 
 
     render: function() { 
 
     return (
 
      <div> 
 
      < CompOne name = "Anne"/> 
 
      < CompOne name = "Bob"/> 
 
      </div> 
 
     ); 
 
     } 
 
    }) 
 
    
 
    ReactDOM.render(<Pri /> , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="root"></div>

來源

2016-11-22 04:39:04

無法在組件中設置狀態

回答

相關問題