Übergabe von Daten in React Native (JavaScript)

[PeterBaumler]

Hallo, ich habe eine Frage zur Weitergabe von Daten zwischen Klassen in React Native und zwar habe ich das Problem, dass ich Daten in dieser Form vorliegen habe in einer JSON

{
    "Name": "Pommern Quelle Medium",
    "Na": 10.4,
    "Mg": 10.7,
    "Ca": 58.6,
    "K": 1.44,
    "Li": 5.1,
    "B": 12.4,
    "Carbohydrate": 0,
    "Protein": 0,
    "Caffeine": 0,
    "Suggar" : 0
  },

jetzt möchte ich diese Daten über zwei Klassen weitergeben dafür habe ich die Daten im so genannten SelectionScreen importiert

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, FlatList } from 'react-native';
import { data } from './Data';

const SelectionScreen = ({ navigation }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredData = data.filter((drink) => {
    return drink.Name.toLowerCase().includes(searchTerm.toLowerCase());
  });
  const navigateToQuantityScreen = (drink) => {
    navigation.navigate('Quantity', {
      drinkName: drink.Name,
      Na: drink.Na,
      Mg: drink.Mg,
      Ca: drink.Ca,
      K: drink.K,
      Li: drink.Li,
      B: drink.B,
      Carbohydrate: drink.Carbohydrate,
      Protein: drink.Protein,
      Caffeine: drink.Caffeine,
      Suggar: drink.Suggar
    });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.searchInput}
        placeholder="Suche Getränke"
        onChangeText={(text) => setSearchTerm(text)}
        value={searchTerm}
      />
      <FlatList
  data={filteredData}
  keyExtractor={(item) => item.Name}
  renderItem={({ item }) => (
    <TouchableOpacity
      style={[styles.selectionButton, { backgroundColor: '#105474' }]}
      onPress={() => navigateToQuantityScreen(item.Name)} // Funktion aufrufen beim Antippen
    >
      <Text style={styles.buttonText}>{item.Name}</Text>
    </TouchableOpacity>
  )}
  initialNumToRender={10}
/>
    </View>
  );
};

und an den QuantityScreen weitergeleitet

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView } from 'react-native';

const QuantityScreen = ({ route, navigation }) => {
    const {
      drinkName,
      Na,
      Mg,
      Ca,
      K,
      Li,
      B,
      Carbohydrate,
      Protein,
      Caffeine,
      Suggar
    } = route.params;
    
  const [customQuantity, setCustomQuantity] = useState('');

  const handleQuantitySelection = (quantityInLiters) => {
    // Umrechnung von Litern in Millilitern
    const quantityInMilliliters = quantityInLiters;
 
    // Navigiere zum "HomeScreen" mit den ausgewählten Daten
 

    navigation.navigate('Statistics', {
      selectedQuantity: quantityInMilliliters,
      drinkData: {
        Na,
        Mg,
        Ca,
        K,
        Li,
        B,
        Carbohydrate,
        Protein,
        Caffeine,
        Suggar,
      },
    });

    console.log('drinkName:', drinkName);
    console.log('Na:', Na);
    console.log('Mg:', Mg);
    console.log('Ca:', Ca);
    console.log('K:', K);
    console.log('Li:', Li);
    console.log('B:', B);
    console.log('Carbohydrate:', Carbohydrate);
    console.log('Protein:', Protein);
    console.log('Caffeine:', Caffeine);
    console.log('Suggar:', Suggar);
 

    navigation.navigate('Home',  {
      selectedQuantity: quantityInMilliliters,
    });
 
  };

  const handleCustomQuantityChange = (text) => {
    setCustomQuantity(text);
  };

 

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.drinkName}>{drinkName}</Text>
      <View style={styles.quantityButtonsContainer}>
        <View style={styles.quantityButtonsRow}>
          <TouchableOpacity
            style={[styles.quantityButton, styles.button]}
            onPress={() => handleQuantitySelection(0.33)}
          >
            <Text style={styles.buttonText}>0,33 l</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.quantityButton, styles.button]}
            onPress={() => handleQuantitySelection(0.5)}
          >
            <Text style={styles.buttonText}>0,5 l</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.quantityButtonsRow}>
          <TouchableOpacity
            style={[styles.quantityButton, styles.button]}
            onPress={() => handleQuantitySelection(0.75)}
          >
            <Text style={styles.buttonText}>0,75 l</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.quantityButton, styles.button]}
            onPress={() => handleQuantitySelection(1)}
          >
            <Text style={styles.buttonText}>1 l</Text>
          </TouchableOpacity>
        </View>
      </View>
      <TextInput
        style={styles.customQuantityInput}
        placeholder="Benutzerdefinierte Menge (ml)"
        onChangeText={handleCustomQuantityChange}
        value={customQuantity}
        keyboardType="numeric"
      />
      <TouchableOpacity
        style={[styles.submitButton, styles.button]}
        onPress={() => {
          if (customQuantity !== '') {
            const customQuantityInLiters = parseFloat(customQuantity) / 1000;
            handleQuantitySelection(customQuantityInLiters);
          }
        }}
      >
        <Text style={styles.buttonText}>Abschicken</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

aber irgendwie funktioniert das nicht kann mir vl jemand helfen

 

[SheepShaver]

Zuerst mal, das sind keine Klassen, sondern Funktionen. React(Native) hat schon vor langer Zeit auf functional Components umgesattelt.
Zur Frage:
Sieht auf den ersten Blick ok aus (du solltest aber wirklich lieber Typescript nutzen imho und auf jeden Fall einen Linter einsetzen).
Zudem, du nutzt React Navigation. Wird denn zumindest korrekt der Screen angesprungen? Schon Breakpoints gesetzt? Wie sieht der Navigator aus?

 

[PeterBaumler]

hat sich erledigt aber trotzdem danke!