如何从嵌套API数据提取城市名供react-bootstrap-typeahead组件使用

我在项目中使用react-bootstrap-typeahead组件，现有如下API响应数据：

{
  "data": [
    {
      "i": 21,
      "att": {
        "lead": "Rent",
        "city": "bangalore"
      }
    },
    {
      ...
    }
    ...
  ]
}

我该如何提取城市名并将其传入组件的options属性？以下是我的API请求代码：

Edit 1: #

const [myData, setMyData] = useState();

async function getCities() {
  return await axios.get(`${API_URL}/api/cp`)
}

useEffect(() => {
  getCities().then((response) => setMyData(response))
  console.log(myData)
}, [props])

Edit 2（更新后的请求代码）: #

async function getCities() {
  const dataOut = await axios.get(`${API_URL}/api/cprops`)
  return dataOut.data
}

useEffect(() => {
  getCities().then((response) => setMyData(response))
  console.log(myData)
}, [props])

解决方案 #

1. 提取并处理城市列表 #

从API返回的myData中提取城市名，同时处理空值和重复项：

// 提取城市名、过滤空值并去重
const cityOptions = myData?.data?.reduce((acc, item) => {
  const city = item.att?.city;
  if (city && !acc.includes(city)) {
    acc.push(city);
  }
  return acc;
}, []) || [];

也可以用map+filter的写法：

const cityOptions = myData?.data?.map(item => item.att?.city)
  ?.filter(Boolean) // 过滤城市名为空/undefined的项
  ?.filter((city, idx, arr) => arr.indexOf(city) === idx) // 去重
  || [];

2. 传入react-bootstrap-typeahead组件 #

将处理好的cityOptions直接传入组件的options属性：

<Typeahead
  options={cityOptions}
  placeholder="选择城市..."
  // 其他组件属性
/>

补充说明 #

• useEffect中的console.log(myData)会打印旧值，因为setMyData是异步操作，要查看更新后的数据可以新增监听：

  useEffect(() => {
    console.log('更新后的myData:', myData);
  }, [myData]);
  

• 如果后续需要用到原始数据的其他字段（比如i或lead），可以保留完整对象作为选项，通过labelKey指定显示字段：

  const cityOptions = myData?.data?.map(item => ({
    id: item.i,
    city: item.att.city,
    lead: item.att.lead
  }))?.filter(item => item.city) || [];
  
  // 组件中使用
  <Typeahead
    options={cityOptions}
    labelKey="city"
    placeholder="选择城市..."
  />
  

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