ReactJS带参数接口搜索栏问题：输入后无数据显示排查

问题总结 #

调用getCountPoiCategoryProvinsi接口加载数据后，输入搜索内容无结果显示，控制台无任何输出。以下是代码中的问题及修复方案：

1. 接口调用缺失必填参数 #

loadPosts函数定义时接收provinsi参数，但调用时未传入（loadPosts()），导致接口请求的provinsi参数为空，可能返回空数据或异常。同时catch块仅打印"salah"，无法定位具体错误。

修复：

• 调用loadPosts时传入有效的省份参数，例如：

  loadPosts("Jakarta"); // 替换为实际有效的省份值
  

• 完善错误日志，便于排查：

  catch (error) {
    console.log("加载数据错误:", error); // 打印具体错误信息
  }
  

2. 过滤函数逻辑错误 #

• 过滤时判断value.title，但渲染时使用的是item.category，若接口返回数据中无title字段，会导致过滤完全失效；
• 过滤函数未明确返回布尔值，当两个条件都不满足时隐式返回undefined，被视为false，但eslint-disable注释掩盖了这个问题；
• 空搜索时返回value（对象），虽JS会将对象视为true，但规范写法应返回布尔值。

修复：
修改过滤逻辑，使用category匹配搜索关键词，并明确返回布尔值：

posts
  .filter((value) => {
    if (searchTitle.trim() === "") {
      return true;
    }
    return value.category?.toLowerCase().includes(searchTitle.toLowerCase());
    // 加?.避免category为undefined时报错
  })
  .map((item, index) => (
    <h5 key={index}>
      {item.category} + {item.jumlah_category}
    </h5>
  ))

3. 接口返回数据结构不兼容 #

接口在404时返回{ lists: [], totalCount: 0 }，但正常返回的是数组（response.data.data），导致posts可能是对象而非数组，调用filter方法会报错，但错误未被捕获（因为404时接口是resolve而非reject）。

修复：
在loadPosts中统一数据结构，确保posts始终是数组：

const result = await getCountPoiCategoryProvinsi(provinsi);
setPosts(Array.isArray(result) ? result : result.lists || []);

或修改接口，404时直接返回空数组：

if (error.response?.data.code === 404)
  resolve([]); // 替换原有的{ lists: [], totalCount: 0 }

4. 搜索状态未正确绑定 #

检查searchTitle的状态绑定是否正确，需确保输入框的onChange事件能更新searchTitle状态：

const [searchTitle, setSearchTitle] = useState("");

// 输入框示例
<input
  type="text"
  value={searchTitle}
  onChange={(e) => setSearchTitle(e.target.value)}
  placeholder="搜索分类..."
/>

若未正确绑定，searchTitle不会随输入变化，过滤逻辑无法触发。

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