私の関数は、合計価格値を計算しますが、常に一歩前ですか？

Question

私は、異なる価格値が与えられた3つの「製品」の合計「価格」を計算するために、スパン「+」または「 - 」をクリックするたびに渡される反応容器内の加算および減算関数を持っています。

私の問題は、どちらかのボタンを最初にクリックしたときにコンソールが初期値0を最初にログアウトしてから、その後にクリックするたびに加算または減算されます。

たとえば、「リンゴ、価格：2」をクリックした場合、コンソールには0が記録されます。次に「梨、価格：5」をクリックし、コンソールに2を記録します合計に5を加算するのではなく、前のクリックからの値。

私の加算機能と減算機能に問題がありますか？コンソールからログアウトする前にstate.totalを変更するのはなぜですか？

class ProductList extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      total: 0 
     } 

     this.addFunction = this.addFunction.bind(this); 
     this.subtractFunction = this.subtractFunction.bind(this); 
    } 

    addFunction(product) { 
     var x = Number(product.price) 
     this.setState({total: this.state.total + x}); 
     console.log('total is ' + this.state.total) 
    } 

    subtractFunction(product) { 
     var x = Number(product.price) 
     this.setState({total: this.state.total - x}); 
     console.log('total is ' + this.state.total) 
    } 

    render() { 
     var createProducts = this.props.products.map((product, i) => { 
      return <Product 
        key={i} 
        title={product.title} 
        price={product.price} 
        addProductSetUp={() => this.addFunction(product)} 
        subtractProductSetUp={() => this.subtractFunction(product)} 
        /> 
     }); 

     return (
      <div> 
       <ul> 
        {createProducts} 
       </ul> 
      </div> 
     ); 
    } 
} 

Answer 1

ReactJSのsetStateがasynchronous操作であり、あなたはそれがすぐに最新の値ですがありません理由です計算値をプリントアウトすることができます。

あなたは右の後にアクセスが必要な場合は、あなたが使用することができます。

this.setState(prevState => ({ 
    total: prevState.total + x, 
}),() => { 
    console.log(this.state) 
}) 

Answer 2

setStateアクションは非同期であり、パフォーマンスの向上のためにバッチ処理される：

は、ここに私のコードです。これはsetStateの文書で説明されています。

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

だからあなたの例では、状態がまだ更新されていません。コールバックを使用して、更新された状態を確認することができます。

addFunction(product) { 
    var x = Number(product.price) 
    this.setState({total: this.state.total + x}, 
    () => console.log('total is ' + this.state.total)); 

} 

しかし、これは必ずしもあなたのケースでは有用ではありません。あなたは、単に

addFunction(product) { 
    var x = Number(product.price); 
    var total = this.state.total + x; 
    this.setState({total}); 
    console.log('total is ' + total); 
}