使用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'));