为什么React搜索国家输入无匹配值时会报countries.map is not a function错误

数据老陈

2026-10-7

错误根因

你调用的国家查询接口在搜索无匹配结果时，不会返回空数组，而是返回状态码404的错误响应体，格式为普通对象而非数组。你直接将这个返回的对象赋值给了原本是数组类型的countries状态，后续执行countries.map时，对象不存在map方法，就抛出了对应错误。

修复方案

你需要对接口返回结果做类型校验，确保赋值给countries的始终是数组类型，修改后的fetchCountries方法参考如下：

先判断接口响应是否成功，状态码非2xx的情况直接设置空数组
再校验返回数据是否为数组类型，不符合就兜底为空数组

const fetchCountries = async () => {
  let url
  if (query) {
    url = `${mainUrl}${serachUrl}${query}`
  } else {
    url = `${mainUrl}${all}`
  }
  try {
    const response = await fetch(url)
    // 先判断响应是否正常
    if (!response.ok) {
      setCountries([])
      return
    }
    const data = await response.json()
    // 二次校验返回内容是否为数组，兜底处理
    setCountries(Array.isArray(data) ? data : [])
  } catch (error) {
    // 网络异常等情况也设置为空数组，避免报错
    setCountries([])
    console.log(error)
  }
}