const 변수를 다른 React 파일로 전송할 수 없는 이유

Question

그래서 한 파일에서 다른 파일로 const 변수를 전송하려고 합니다. 어떤 이유로든 액세스할 수 없으며 텍스트 파일로 표시할 수 없습니다. 아래는 website.js 코드와 pay.js 파일입니다. 표시되는Amount 변수를 홈 페이지 파일에서 프리미엄 파일로 전송한 다음 텍스트 요소에 표시하려고 합니다. 하지만 이렇게 하면 "오류: 텍스트 문자열은 구성 요소 내에서 렌더링되어야 합니다."라는 오류가 발생합니다. 으아악

import { StyleSheet, Text, View, Image, Dimensions, TouchableOpacity, Alert, Animated } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import React, { useState, useEffect, useRef } from 'react';
import { useNavigation } from '@react-navigation/native';
import pay from './pay';

const homepage = ({ route, navigation }) => {
  const [selectedAmount, setSelectedAmount] = useState("0");
  const [displayedAmount, setDisplayedAmount] = useState("0");
  const fadeAnim = new Animated.Value(0);  // initial opacity
  const screenWidth = Dimensions.get('window').width;
  const buttonWidth = screenWidth * 0.45;
  const spaceBetweenNumbers = 100;
  
  
  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();
    
    if (selectedAmount.includes('.')) {
        const [whole, decimal] = selectedAmount.split('.');
        setDisplayedAmount(`${isNaN(parseInt(whole)) ? "0" : parseInt(whole).toLocaleString()}.${decimal}`);
      } else {
        setDisplayedAmount(isNaN(parseInt(selectedAmount)) ? "0" : parseInt(selectedAmount).toLocaleString());
      }

    Animated.timing(
      fadeAnim,
      {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();

  }, [selectedAmount]);

  const handleNumberPress = (number) => {
    if (selectedAmount.length < 5) {
      setSelectedAmount(prevState => prevState === "0" ? String(number) : prevState + number);
    }
  };

  const handleDecimalPress = () => {
    if (!selectedAmount.includes(".") && selectedAmount.length < 4) {
      setSelectedAmount(prevState => prevState + ".");
    }
  };

  const handleDeletePress = () => {
    setSelectedAmount(prevState => prevState.slice(0, -1) || "0");
  };
  const goTopay = () => {
    navigation.navigate('Pay', { displayedAmount }); // passing displayedAmount as a parameter
  };

Answer 1

여러 옵션:

1. 정적 값의 경우 중첩되지 않은 값을 내보냅니다 const. 두 구성 요소에 동일한 상수가 필요하고 하나에 다른 구성 요소가 필요한 경우 필요 루프가 생성되지 않도록 상수를 분리하는 것이 일반적입니다. 참고로, 내보내기 상수의 이름은 내보내기 VS 기본 내보내기입니다. 따라서 가져오려면 중괄호를 사용해야 합니다.

으아아아

2. 애플리케이션 간에 내보내야 하는 상태 저장 값의 경우 React.Context API 또는 전역 상태 관리 라이브러리를 확인하세요.
3. 하위 구성 요소의 경우 props를 통해 구성 요소에 데이터를 전달할 수 있습니다.
4. React 탐색 화면 탐색의 경우 params 개체를 통해 화면에 매개변수를 보낼 수 있습니다.