L'incrémentation de la valeur de l'état par une à l'aide de Réagir

De Réagir, je suis en train de faire un bouton incrémenter une valeur stockée dans l'état.
Toutefois, en utilisant le code ci-dessous fonction de ma valeur est définie non définie ou NaN lors de l'utilisation de 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 ce qui se passe? il doit être correct selon les docs ici:
https://facebook.github.io/react/docs/state-and-lifecycle.html

OriginalL'auteur dwigt | 2017-02-21

  1. 3

    ensemble de l'état est asynchrone, donc vous ne verrez pas la valeur de mise à jour lorsque la console.journal qui se passe. Vous devriez avoir la valeur de l'état imprimé sur l'INTERFACE utilisateur de sorte que vous pouvez voir ce qui se passe. Pour résoudre le journal de la console de l'essayer.

    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 ligne lambda (flèche fonction) pour une réagir la classe this est lié correctement de sorte que vous n'avez pas besoin de les lier dans le constructeur.

    aussi vous pouvez modifier la façon dont vous passez le numéro précédent, si c'est juste un état d'incrément comme ce

    handleClick = () => {
    this.setState({value: this.state.value + 1}, () => {
        console.log(this.state.value)
    });
}
    Merci, j'ai besoin de ne pas utiliser prevState.
    il vous remarqué, j'ai changé votre journal de la console pour être un rappel pour votre setstate fonction. car un en ligne du journal de la console s'exécute lorsque le thread de coups après le setstate appel de fonction non pas de l'achèvement de votre état de mise à jour 🙂

    OriginalL'auteur John Ruddell

  2. 1

    Essayer 

    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, il déclenche la fonction rendu, qui reflètent l'état actuel. Essayez-la dans le navigateur!

    OriginalL'auteur ChannelJuanNews

  3. 1
    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>
      );
    }
  }

    OriginalL'auteur D V Yogesh

  4. 1

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

    OriginalL'auteur user8290176