React Native中如何点击图标交换两个SelectDropdown组件的值？

当前点击切换图标仅更新了源语言值，未完成双向交换，以下是修正方案：

修改要点 #

• 移除冗余同步代码：删除组件内的language对象和两个useEffect，直接使用sourceLanguage和destinationLanguage状态变量即可，无需额外同步。
• 修正交换逻辑：在切换函数中暂存当前两个语言值，再双向设置状态完成交换。
• 统一初始值类型：将状态初始值从空字符串改为null，与选中的语言对象类型保持一致，避免渲染错误。

修正后的完整代码 #

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

const DropDown = () =>{
  // 初始值设为null，匹配语言对象类型
  const[sourceLanguage, setSourceLanguage] = useState(null);
  const[destinationLanguage, setDestinationLanguage] = useState(null);

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

  const SwitchLanguages = () =>{
    // 暂存当前的两个语言值，完成双向交换
    const tempSource = sourceLanguage;
    const tempDest = destinationLanguage;
    setSourceLanguage(tempDest);
    setDestinationLanguage(tempSource);
  }

  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>
  );
}
export default DropDown;

关键说明 #

• 移除了不必要的中间变量和同步逻辑，直接利用React状态的响应式特性处理数据。
• 切换函数通过临时变量保存当前状态，确保两个下拉框的值同时完成互换。
• 统一初始值类型，避免渲染时因类型不匹配出现的读取错误。

内容的提问来源于stack exchange，提问作者kiflay