使用React將狀態值增加1

Question

在React中，我試圖讓按鈕增加一個存儲在狀態中的值。 但是，使用下面的代碼函數時，我的值設置爲undefined或NaN時使用handleClick。

class QuestionList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: 0}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick = (prevState) => { 
    this.setState({value: prevState.value + 1}); 
    console.log(this.state.value) 
    } 

你能告訴我爲什麼會發生這種情況嗎？它應該是正確的根據文檔在這裏： https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 1

設置狀態是異步，所以你不會看到console.log發生時的值更新。您應該在UI上打印出狀態值，以便您可以看到發生了什麼。要修復控制檯日誌，請嘗試此操作。

class QuestionList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: 0}; 
    } 

    handleClick = (prevState) => { 
    this.setState({value: prevState.value + 1},() => { 
     console.log(this.state.value) 
    }); 
    } 

注意：當你的反應，所以你不需要將其綁定在構造類this正確綁定定義內聯拉姆達（箭頭功能）。

你也可以改變你傳遞前一個號碼，如果途中它只是像這樣

handleClick =() => { 
    this.setState({value: this.state.value + 1},() => { 
     console.log(this.state.value) 
    }); 
} 

Answer 2

的狀態增量嘗試了這一點

class QuestionList extends React.component { 

    constructor(props){ 
     super(props) 
     this.state = { 
      value : 0 
     } 
    } 

    handleClick(){ 
     this.setState({ 
      value : this.state.value + 1 
     }) 
    } 

    render(){ 
     return(<button type="button" onClick={this.handleClick.bind(this)}> {this.state.value} </button>) 
    } 
} 

注意，當您設置的狀態，它會觸發渲染功能，它將反映當前狀態。在瀏覽器中試用！

Answer 3

因爲您錯誤地使用了handleClick函數。在這裏：

handleClick = (prevState) => { .... } 

prevState將被傳遞給handleClick功能的事件對象，你需要使用prevState用的setState，像這樣：

handleClick =() => { 
    this.setState(prevState => { 
     return {count: prevState.count + 1} 
    }) 
} 

的另一個問題是，的setState是異步這樣console.log(this.state.value)不會打印更新的狀態值，您需要使用setState的回調函數。

查看有關async behaviour of setState以及如何檢查更新值的更多詳細信息。

檢查工作的解決方案：

class App extends React.Component { 
 
    
 
    constructor(props){ 
 
     super(props); 
 
     this.state={ count: 1} 
 
    } 
 
    
 
    onclick(type){ 
 
     this.setState(prevState => { 
 
     return {count: type == 'add' ? prevState.count + 1: prevState.count - 1} 
 
     }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     Count: {this.state.count} 
 
     <br/> 
 
     <div style={{marginTop: '100px'}}/> 
 
     <input type='button' onClick={this.onclick.bind(this, 'add')} value='Inc'/> 
 
     <input type='button' onClick={this.onclick.bind(this, 'sub')} value='Dec'/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

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

 
<div id='container'></div>

Answer 4

class SkuVariantList extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
     clicks: 0 
     }; 
     this.clickHandler = this.clickHandler.bind(this) 
    } 

    componentDidMount() { 
     this.refs.myComponentDiv.addEventListener('click', this.clickHandler); 
    } 

    componentWillUnmount() { 
     //this.refs.myComponentDiv.removeEventListener('click', this.clickHandler); 
    } 

    clickHandler() { 
     var clk = this.state.clicks 
     this.setState({ 
     clicks: clk + 1 
     }); 
    } 

    render() { 
     let children = this.props.children; 

     return (
     <div className="my-component" ref="myComponentDiv"> 
      <h2>My Component ({this.state.clicks} clicks})</h2> 
      <h3>{this.props.headerText}</h3> 
      {children} 
     </div> 
    ); 
    } 
    } 

Answer 5

你好，嘗試這些代碼來增加你的價值

class Counter extends React.Component{ 
constructor(props){ 
    super(props); 
    this.addOne = this.addOne.bind(this); 
     this.state = { 
     count : 0 
     } 
    } 

addOne() {        // addOne as HandleClick 
    this.setState((preState) => { 
    return { 
     count : preState.count + 1 
     }; 
    }); 
} 

render() { 
    return (
     <div> 
     <h1>Count : {this.state.count}</h1> 
     <button onClick={this.addOne}>+1</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Counter />, document.getElementById('YOUR-ID'));