React中从API生成动态下拉菜单的报错问题求助

错误原因 #

react-select 组件的 options 属性要求传入包含label和value字段的对象数组，但你直接传入了字符串数组。组件尝试把每个字符串当作对象去查找options属性，因此抛出了Cannot use 'in' operator to search for 'options' in Admin的错误。

修复步骤 #

1. 修正初始状态
   初始的data应该是一个包含departments空数组的对象，避免组件初始化时data.departments出现undefined：

   const [data, setData] = useState({ departments: [] })
   

2. 转换数组格式
   将API返回的字符串数组，转换成react-select要求的对象数组，每个元素需要包含label（显示文本）和value（对应值）：

   const selectOptions = data.departments.map(item => ({
     label: item,
     value: item
   }))
   

完整修正代码 #

import React, { useState, useEffect } from 'react'
import Select from 'react-select';

function Dropdown() {
  // 初始化data为包含空departments数组的对象
  const [data, setData] = useState({ departments: [] })

  useEffect(() => {
    fetch("/listDepartments")
      .then(response => response.json())
      .then(fetchedData => {
        setData(fetchedData)
      })
  }, [])

  // 转换字符串数组为react-select需要的格式
  const selectOptions = data.departments.map(item => ({
    label: item,
    value: item
  }))

  return (
    <div>
     <Select options={selectOptions} />
    </div>
  )
}
export default Dropdown;

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