Estoy creando una aplicación de tienda básica usando React. Así que aquí tengo esta función que calcula el precio final de los productos. Código:

 calculateTotal = () => { const total2 = this.state.final_apple_price + this.state.final_avocado_price + this.state.final_branzino_price + this.state.final_bread_price + this.state.final_burger_price + this.state.final_carrot_price + this.state.final_cheese_price + this.state.final_chicken_price + this.state.final_donut_price + this.state.final_egg_price + this.state.final_falooda_price + this.state.final_milk_price + this.state.final_muffin_price + this.state.final_orange_price + this.state.final_pizza_price + this.state.final_potato_price + this.state.final_salmon_price + this.state.final_strawberry_price; this.setState({ total: total2 }); };

El estado tiene:

 total: 0,

Y aquí se supone que devuelve los valores de todos los productos:

 <h1>{this.state.total}</h1>

Sin embargo, se muestra 0 en h1, incluso cuando se agregan elementos.

Otra cosa que probé en la función de cálculo total es:

 return total2;

y

 <h1>{this.calculateTotal()}</h1>

Aún así, no está funcionando. ¿Como arreglar? Gracias