web-dev-qa-db-fra.com

Incrémenter la valeur d’état de un en utilisant React

In React J'essaie de faire en sorte qu'un bouton incrémente une valeur stockée dans l'état. Cependant, en utilisant le code ci-dessous, ma valeur est définie sur undefined ou sur NaN lorsque vous utilisez 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)
  }

Pouvez-vous me dire pourquoi cela se passe? il devrait être correct selon la documentation ici: https://facebook.github.io/react/docs/state-and-lifecycle.html

reactjsstate
19
dwigt

Parce que vous utilisez la fonction handleClick de manière incorrecte. Ici:

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

prevState sera un objet événement transmis à la fonction handleClick, vous devez utiliser prevState avec setState, comme ceci:

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

Un autre problème est que setState est async. Par conséquent, console.log(this.state.value) n’imprimera pas la valeur de l’état mis à jour, vous devez utiliser la fonction de rappel avec setState.

Vérifiez plus de détails sur comportement asynchrone de setState et comment vérifier la valeur mise à jour.

Vérifiez la solution de travail:

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>
21
Mayank Shukla

set state est asynchrone afin que vous ne voyiez pas la valeur mise à jour lorsque le fichier console.log se produit. Vous devriez avoir la valeur d'état imprimée sur l'interface utilisateur pour pouvoir voir ce qui se passe. Essayez de corriger le journal de la console.

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)
    });
  }

REMARQUE: lorsque vous définissez une lambda (fonction de flèche) en ligne pour une classe de réaction, this est lié correctement, vous n'avez donc pas besoin de le lier dans le constructeur.

vous pouvez aussi changer la façon dont vous passez le numéro précédent si son incrément d'état est comme celui-ci

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

Bonjour, essayez ces codes pour augmenter votre valeur

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'));
2
user8290176
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>
      );
    }
  }
2
D V Yogesh

Essayez ceci

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> )
   }
}

Notez que lorsque vous définissez un état, la fonction de rendu est déclenchée, ce qui reflète l'état actuel. Essayez-le dans le navigateur!

1
ChannelJuanNews

C'est le code le plus court pour ça. Tout d’abord, initialisez l’état, puis appliquez une méthode pour incrémenter.

state = {
    counter: 0
  }

increaseHandler = () => {
    let counter = this.state.counter
    counter += 1
    this.setState({counter: counter})
  }
0
Seyi Oluwadare
import React from 'react'

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      count: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    this.setState(prevState => {
      return {
        count: prevState.count + 1
      }
    })
  }
  render(){
    return(
      <div style = {{display: 'flex', fontSize: 30, flexDirection: 'column', alignItems:'center'}}>
        <h1>{this.state.count}</h1>
        <button onClick = {this.handleClick}>Change</button>
      </div>
    )
  }
}
export default App
0
Colloh