React Native Element Dropdown下拉框显示label而非value问题求助

使用react-native-element-dropdown库，数据结构为{label, value}格式，但下拉列表只显示label（如"319"），希望显示对应的value（如"Ahşap"）。

数据示例 #

[
  {
    "label": "319",
    "value": "Ahşap",
  },
  {
    "label": "320",
    "value": "Betonarme",
  },
  {
    "label": "321",
    "value": "Çelik ",
  },
  {
    "label": "322",
    "value": "Kütük",
  },
  {
    "label": "323",
    "value": "Prefabrik",
  },
]
[
  {
    "label": "332",
    "value": "Var",
  },
  {
    "label": "333",
    "value": "Yok",
  },
]

现有代码 #

App.js #

const [selected, setSelected] = useState({});

// 将对象转为数组格式
function setDropdown(query) {
  const response = query;
  try {
    const array = Object.entries(response).map(([key, value]) => ({
      label: key,
      value: value,
    }));
    return array;
  } catch (error) {
    console.log(error);
  }
}

function renderItems({ item }) {
let dropdownData = setDropdown(item.options);
    if (Object.keys(item.options).length > 0) {
      return (
        <View>
          <CustomDropdown
            text={item.name}
            data={dropdownData}
            value={selected}
            setValue={setSelected}
          />
        </View>
      );
    } else if (Object.keys(item.options).length == 0) {
      const keyboardType = item.numeric ? "numeric" : "default";
      return (
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            placeholder={item.name}
            keyboardType={keyboardType}
          />
        </View>
      );
    }
  }

CustomDropdown.js #

function CustomDropdown({ text, data, value, setValue }) {
  const [isFocus, setIsFocus] = useState(false);

  return (
    <View>
      <View style={{ backgroundColor: "#fff", padding: 10, borderRadius: 15 }}>
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          placeholder={!isFocus ? text : "..."}
          data={data}
          maxHeight={300}
          labelField="label"
          valueField="value"
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          value={value}
          onChange={(item) => {
            setValue(item.value);
            setIsFocus(false);
          }}
        />
      </View>
    </View>
  );
}

解决方案 #

1. 修改下拉组件的显示字段配置 #

在CustomDropdown.js的Dropdown组件中，labelField属性控制下拉选项和选中后显示的文本字段，当前设置为label导致只展示编号。将其改为value即可显示目标内容：

<Dropdown
  // 其他属性不变
  labelField="value"
  valueField="value"
  // 其他属性不变
/>

2. 修正状态初始值类型 #

App.js中selected初始值为对象{}，但实际选中后存储的是字符串类型的value值，类型不匹配可能导致显示异常，将初始值改为空字符串：

const [selected, setSelected] = useState('');

3. （可选）多下拉场景的状态隔离 #

如果页面存在多个下拉组件，共用一个selected状态会导致选中值冲突。建议改为对象存储，用每个下拉的唯一标识作为key：

// App.js中修改状态初始化
const [selected, setSelected] = useState({});

// CustomDropdown中修改onChange逻辑（需额外传递下拉唯一标识，如item.name）
onChange={(item) => {
  setValue(prev => ({...prev, [itemKey]: item.value}));
  setIsFocus(false);
}}

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