使用react-native-dropdown-picker实现带搜索选择器遇迭代器错误

问题场景 #

尝试使用react-native-dropdown-picker组件实现带搜索功能的选择器，从数据库获取数据后循环生成选项时触发报错：undefined is not an object (evaluating'iter[Symbol.iterator]')。已确认数据库返回数据正常（可在普通选择器中显示）。

获取数据代码 #

const [dataSourceclientes, setDataSourceclientes] = useState([]);
useEffect(() => {
  fetch('https://exampleweb.es/api/data_clientes.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${auth.token}`,
    },
    body: JSON.stringify({
      token: auth.token,
    }),
  })
  .then(response => response.json())
  .then(responseJson => {
    setDataSourceclientes(responseJson);
  })
  .catch(error => {
    console.error(error);
  });
}, []);

报错的选择器代码 #

<DropDownPicker
  open={open}
  searchable={true}
  value={value}
  selectedValue={clienteSeleccion}
  onValueChange={(text) => { formik.setFieldValue("cliente", text); setSelectmodelos(text); setclienteSeleccionado(text); } }
  items={dataSourceclientes.map((item, key)=>(
    
        label=item.nombre,
        value=item.id,
        key=key
      )
    )}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  mode="BADGE"
  badgeDotColors={["#e76f51", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a"]}
/>

错误原因 #

报错核心是map方法的返回格式错误：

• 代码中map回调里的label=item.nombre, value=item.id, key=key不是合法的对象语法，正确的对象键值对应使用冒号:分隔，且需要用大括号{}包裹。
• 同时，map回调返回对象时，需要用小括号()包裹大括号，避免被解析为代码块，否则会返回undefined，最终导致items接收的不是可迭代的有效数组。

解决方法 #

方法1：用户自行实现的解决方案 #

通过循环构建符合组件要求的选项数组，再传入items属性：

const [dataSourceclientes, setDataSourceclientes] = useState([]);

useEffect(() => {
  fetch('https://exampleweb.es/api/data_clientes.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${auth.token}`,
    },
    body: JSON.stringify({
      token: auth.token,
    }),
  })
  .then(response => response.json())
  .then(responseJson => {
    const tempArr = [];
    for (let i = 0; i < responseJson.length; i++) {
      tempArr.push({"label": responseJson[i].nombre, "value":responseJson[i].id});
    }
    setDataSourceclientes(tempArr);
  })
  .catch(error => {
    console.error(error);
  });
}, []);

<DropDownPicker
  open={open}
  searchable={true}
  selectedValue={clienteSeleccion}
  onValueChange={(text) => { formik.setFieldValue("cliente", text); setSelectmodelos(text); setclienteSeleccionado(text); } }
  items={dataSourceclientes}
  setOpen={setOpen}
  setValue={clienteSeleccion}
  setItems={setItems}
  mode="BADGE"
  badgeDotColors={["#e76f51", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a"]}
/>

方法2：优化的map写法（更简洁） #

直接修正map的返回格式，一步转换数据：

<DropDownPicker
  open={open}
  searchable={true}
  value={value}
  selectedValue={clienteSeleccion}
  onValueChange={(text) => { formik.setFieldValue("cliente", text); setSelectmodelos(text); setclienteSeleccionado(text); } }
  items={dataSourceclientes.map((item, key) => ({
    label: item.nombre,
    value: item.id,
    key: key
  }))}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  mode="BADGE"
  badgeDotColors={["#e76f51", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a"]}
/>

只需确保dataSourceclientes是数组类型，map会返回符合组件要求的选项数组，无需额外循环。

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