Frage zu UseEffect in React Native

[PeterBaumler]

Hallo ich wollte fragen warum ich hier bei der doppelten Eingabe von gleichem Wert für selectedQuantity und drinkName keine Größenveränderung der Balken sehe? Wenn ich unterschiedliche nehme geht es. Würde mich über Hilfe freuen!

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
import { data } from './Data';
import { useNavigation, useRoute } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const findDrinkByName = (name) => {
  return data.find(drink => drink.Name === name);
};

const StatisticScreen = () => {

 

  const route = useRoute(); // Verwenden Sie die useRoute-Hook, um auf die Route-Parameter zuzugreifen
  const { selectedQuantity, drinkName } = route.params || {
    selectedQuantity: 0,
    drinkName: "Trendic Medium" // Hier wird nur der Name direkt gesetzt
  };

  // State-Variablen zur Verwaltung der Balkenhöhen
  const [sodiumHeight, setSodiumHeight] = useState(0);
  const [magnesiumHeight, setMagnesiumHeight] = useState(0);
  const [calciumHeight, setCalciumHeight] = useState(0);
  const [potassiumHeight, setPotassiumHeight] = useState(0);
  const [lithiumHeight, setLithiumHeight] = useState(0);
  const [boronHeight, setBoronHeight] = useState(0);
  const [carbohydrateHeight, setCarbohydrateHeight] = useState(0);
  const [proteinHeight, setProteinHeight] = useState(0);
  const [sugarHeight, setSugarHeight] = useState(0);
  const [caffeineHeight, setCaffeineHeight] = useState(0);

  const selectedDrink = findDrinkByName(drinkName);

  const sodium = selectedDrink.Na;
  const magnesium = selectedDrink.Mg;
  const calcium = selectedDrink.Ca;
  const potassium = selectedDrink.K;
  const lithium = selectedDrink.Li;
  const boron = selectedDrink.B;
  const carbohydrate = selectedDrink.Carbohydrate;
  const protein = selectedDrink.Protein;
  const caffeine = selectedDrink.Caffeine;
  const sugar = selectedDrink.Suggar;


  useEffect(() => {
    // Funktion zum Berechnen der Balkenhöhe
    const calculateBarHeight = (currentValue, maxValue) => {
      const maxHeight = 150; // Maximale Höhe des Balkens
      // Berechnen Sie die Balkenhöhe proportional zum Verhältnis von currentValue zu maxValue,
      // begrenzt auf die maximale Höhe von 150
      const height = Math.min((currentValue / maxValue) * maxHeight, maxHeight);
      // Stellen Sie sicher, dass die Höhe nicht mehr als die maximale Höhe beträgt
      return Math.min(height, maxHeight);
    };
 
    // Balkenhöhen für verschiedene Spurenelemente berechnen und aktualisieren
    setSodiumHeight(prevHeight => prevHeight + calculateBarHeight(sodium * selectedQuantity * 10, 1500));
    setMagnesiumHeight(prevHeight => prevHeight + calculateBarHeight(magnesium * selectedQuantity * 10, 2500));
    setCalciumHeight(prevHeight => prevHeight + calculateBarHeight(calcium * selectedQuantity * 10, 1000));
    setPotassiumHeight(prevHeight => prevHeight + calculateBarHeight(potassium * selectedQuantity * 10, 1750));
    setLithiumHeight(prevHeight => prevHeight + calculateBarHeight(lithium * selectedQuantity * 10, 1000));
    setBoronHeight(prevHeight => prevHeight + calculateBarHeight(boron * selectedQuantity * 10, 2000));
    setCarbohydrateHeight(prevHeight => prevHeight + calculateBarHeight(carbohydrate * selectedQuantity * 10, 2000));
    setProteinHeight(prevHeight => prevHeight + calculateBarHeight(protein * selectedQuantity * 10, 100));
    setSugarHeight(prevHeight => prevHeight + calculateBarHeight(sugar * selectedQuantity * 10, 2000));
    setCaffeineHeight(prevHeight => prevHeight + calculateBarHeight(caffeine * selectedQuantity * 10, 2000));
    

  }, [selectedQuantity, drinkName,]);

 

[SheepShaver]

Du hast den Hook doch mit den entsprechenden Dependencies definiert, d.h. er wird nur aufgerufen, wenn sich die Dependencies ändern.