在React Native中，如何在按下时交换两个选择组件的值？

Question

尝试交换 Icon Press 上两个组件的值。 我有两个组件，分别是源语言和目标语言，当用户按下切换图标时，两个组件的值将被交换

按下“按下按钮”时，我希望切换两个下拉值的值

import { faArrowRightArrowLeft, faArrowsLeftRight } from "@fortawesome/free-solid-svg- 
icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useEffect, useState } from "react";
import { View, Text, StyleSheet, Button, TouchableOpacity } from "react-native";
import { IconButton } from "react-native-paper";
import SelectDropdown from "react-native-select-dropdown";

const DropDown = () =>{
const[sourceLanguage, setSourceLanguage] = useState("");
const[destinationLanguage, setDestinationLanguage] = useState("");


const language = {
    source: null,
    destination: null
}

const languages = [
 {title: 'Amharic', value: 'Amharic'},
 {title: 'Arabic',  value: 'Arabic'}
]
useEffect(() =>{
    language.source = sourceLanguage
    

},[sourceLanguage])
useEffect(() =>{
    language.destination = destinationLanguage;
    

},[destinationLanguage])

const SwitchLanguages = () =>{
   console.log(language.destination.title)
   setSourceLanguage({ 
    ...language.destination,
    title:  language.destination.title,
    value: language.destination.value
    
    });
    
}
return (
    <View style={styles.container}>

        <SelectDropdown
        data={languages}
        onSelect={(selectedItem, index) =>

            {
                setSourceLanguage(selectedItem)

            }}

        renderButton={(selectedItem, isOpened) =>
            {
            return(
                <View style={styles.dropdownButtonStyle}>
                    <Text style={styles.dropdownButtonTxtStyle}>
                        {selectedItem?.title || 'Select Source'}
                    </Text>
                </View>
            );

        }}
        renderItem={(item, index, isSelected) =>{
            return (
                <View style ={{
                    ...styles.dropdownItemStyle,
                    ...(isSelected && {backgroundColor : '#D2D9DF'})
                }}>
                    <Text style ={ styles.dropdownItemTxtStyle}>{item.title}</Text>
                </View>
            );

        }}
        dropdownStyle={styles.dropdownMenuStyle}
        />
        <View style={{width: 6}} />

           <TouchableOpacity 
           onPress={SwitchLanguages}>
            <FontAwesomeIcon 
            icon={faArrowRightArrowLeft}
            color="#FFF"
            size={20} />
           </TouchableOpacity>

            
        <View style={{width: 6}} />

        <SelectDropdown 
        data={languages}
        onSelect={(selectedItem, index) =>
        {
            setDestinationLanguage(selectedItem);
        
        }}
        renderButton={(selectedItem, isOpened) =>
        {
            return (
                <View style={styles.dropdownButtonStyle}>
                    <Text style={styles.dropdownButtonTxtStyle}> {selectedItem?.title || 'select Destination'} </Text>
                </View>

            );

        }}
        renderItem={(item, index, isSelected) =>
        {
            return (
                <View  style={{
                    ...styles.dropdownItemStyle,
                    ... (isSelected &&  {backgroundColor: '#D2D9DF'})
                }}>
                    <Text style={styles.dropdownItemTxtStyle}> {item.title}</Text>

                </View>
            );
        }}
        dropdownStyle={styles.dropdownMenuStyle}

        />

        
       
       
    </View>

);

}

导出默认DropDown；

Answer 1

该实现可能无法按预期工作，因为

language

会在每个渲染周期重新声明回空值，并且直到渲染周期结束时

useEffect

钩子运行并改变该引用时才会更新。

我认为

language

很可能是不必要的。您可以将状态更新排队以直接交换

sourceLanguage

和

destinationLanguage

状态值。

考虑以下示例：

const languages = [
  { title: 'Amharic', value: 'Amharic' },
  { title: 'Arabic',  value: 'Arabic' },
];

const DropDown = () => {
  const[sourceLanguage, setSourceLanguage] = useState("");
  const[destinationLanguage, setDestinationLanguage] = useState("");

  const switchLanguages = () => {
    setSourceLanguage({ ...destinationLanguage });
    setDestinationLanguage({ ...sourceLanguage });
  }

  ...
};