React Native Expo中react-native-dropdown-select-list多选框默认值设置方案

react-native-dropdown-select-list的MultipleSelectList确实不支持defaultOption属性，但不需要重新开发组件，通过初始化选中状态就能实现预填默认值，具体方案如下：

核心逻辑 #

MultipleSelectList的选中状态完全由setSelected绑定的数组控制，只需在初始化状态时传入需要预填的选项key数组，组件就会自动选中对应选项。

静态默认值示例（固定预填项） #

如果默认值是固定的，直接在useState中初始化选中数组：

import { useState } from 'react';
import { MultipleSelectList } from "react-native-dropdown-select-list";

const EditForm = () => {
  // 初始化预填的选项key数组，比如选中key为"1"的选项
  const [selectedItems, setSelectedItems] = useState(["1"]);

  const options = [
    { key: "1", value: "Jammu & Kashmir" },
    { key: "2", value: "Delhi" },
    { key: "3", value: "Mumbai" },
  ];

  return (
    <MultipleSelectList
      onSelect={() => alert('选中项已更新')}
      setSelected={setSelectedItems}
      data={options}
    />
  );
};

export default EditForm;

动态默认值示例（编辑表单场景） #

如果默认值是从接口获取的已有数据，通过useEffect在数据加载后更新选中状态：

import { useState, useEffect } from 'react';
import { MultipleSelectList } from "react-native-dropdown-select-list";

const EditForm = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const [options, setOptions] = useState([]);

  // 模拟从接口获取编辑数据和选项列表
  useEffect(() => {
    // 接口返回的用户已选选项key数组
    const savedSelectedKeys = ["1", "3"];
    // 接口返回的完整选项列表
    const fetchedOptions = [
      { key: "1", value: "Jammu & Kashmir" },
      { key: "2", value: "Delhi" },
      { key: "3", value: "Mumbai" },
    ];
    
    setOptions(fetchedOptions);
    setSelectedItems(savedSelectedKeys);
  }, []);

  return (
    <MultipleSelectList
      onSelect={() => alert('选中项已更新')}
      setSelected={setSelectedItems}
      data={options}
    />
  );
};

export default EditForm;

注意事项 #

• 传入的默认值必须是选项中存在的key组成的数组，不能直接传选项对象
• 如果选项列表是异步加载的，要确保在选项加载完成后再设置选中状态，避免组件无法匹配选项

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