react-native-element-dropdown二级下拉框onChange返回undefined问题

核心错误点 #

1. 下拉框取值字段错误：第二个Dropdown的onChange里你写了item.valueRestaurantType，但你的dataRestaurantType数组中定义的取值字段是value，和第一个下拉框一致，所以应该用item.value。
2. Formik字段赋值错误：setValueRestaurantType是异步操作，直接用valueRestaurantType给Formik赋值会拿到旧值，应该直接用选中的item.value；另外你拼写错了字段名restauranType，少了一个t，正确应为restaurantType。
3. 第一个下拉框的异步赋值问题：同样的逻辑，第一个下拉框的formik.setFieldValue("businessType", value)应该改成formik.setFieldValue("businessType", item.value)，避免异步state更新导致的旧值问题。

修复后的完整代码 #

export function EcoForm(props) {
  const { formik } = props;
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => {
    setIsEnabled((previousState) => !previousState);
    formik.setFieldValue("eco", isEnabled);
  };
  const dataBusinessType = [
    { label: "Restaurant", value: "restaurant" },
    { label: "Shop", value: "shop" },
    { label: "Acomodation", value: "acomodation" },
  ];
  const dataRestaurantType = [
    { label: "RestaurantTYpe", value: "restaurantType" },
    { label: "Cofee/Bakery", value: "cofee/Bakery" },
  ];

  const [value, setValue] = useState(null);
  const [valueRestaurantType, setValueRestaurantType] = useState(null);

  return (
    <View style={styles.content}>
      <Text style={styles.text}>Is the business Ecofriendly?</Text>

      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={dataBusinessType}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder="Select business type"
        searchPlaceholder="Search..."
        value={value}
        onChange={(item) => {
          setValue(item.value);
          formik.setFieldValue("businessType", item.value);
        }}
        renderLeftIcon={() => (
          <AntDesign
            style={styles.icon}
            color="black"
            name="Safety"
            size={20}
          />
        )}
      />
      {value === "restaurant" ? (
        <>
          <Dropdown
            style={styles.dropdown}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            iconStyle={styles.iconStyle}
            data={dataRestaurantType}
            search
            maxHeight={300}
            labelField="label"
            valueField="value"
            placeholder="Select restaurant type"
            searchPlaceholder="Search..."
            value={valueRestaurantType}
            onChange={(item) => {
              setValueRestaurantType(item.value);
              formik.setFieldValue("restaurantType", item.value);
              console.log("选中值: ", item.value);
            }}
            renderLeftIcon={() => (
              <AntDesign
                style={styles.icon}
                color="black"
                name="Safety"
                size={20}
              />
            )}
          />

          <CheckBox
            title="Eco friendly"
            checked={isEnabled}
            onPress={() => toggleSwitch()}
          />
          <CheckBox
            title="Vegan"
            checked={isEnabled}
            onPress={() => toggleSwitch()}
          />
        </>
      ) : null}
    </View>
  );
}

额外提示 #

• 两个CheckBox绑定了同一个isEnabled状态，会导致勾选一个另一个同步变化，如果需要独立控制，建议给Vegan单独新增一个state变量。
• React的setState是异步操作，更新后立刻读取state大概率拿到旧值，直接使用回调参数里的item是更可靠的取值方式。

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