React搜索功能触发空白页及filter未定义错误求助

• 定位核心问题：这个错误说明你调用filter()的变量在执行时刻是undefined——哪怕你确认最终返回的数据是数组，也要考虑状态更新时序、异步加载的影响，比如组件初始化或异步请求未完成时，该变量还未被赋值为数组。

• 修正状态初始值：确保存储数据的状态变量初始化为空数组[]，而非undefined。以React为例：

  // 错误示例
  const [data, setData] = useState()
  // 正确示例
  const [data, setData] = useState([])
  

• 增加执行过滤的前置判断：在调用filter()前，先确认数据已存在，避免在undefined上执行方法。可以用可选链操作符或条件判断：

  // 可选链写法
  const filteredData = data?.filter(item => item.title.includes(searchValue))
  // 条件判断写法
  const filteredData = data ? data.filter(item => item.title.includes(searchValue)) : []
  

• 检查数据更新逻辑：确认异步请求返回后，是否正确将数组赋值给状态变量。比如不要误把整个响应对象（可能是包含data字段的对象）直接赋值，而应该取对应的数组部分：

  // 错误示例（假设响应是 { code: 200, data: [...] }）
  fetch('/api/data').then(res => res.json()).then(res => setData(res))
  // 正确示例
  fetch('/api/data').then(res => res.json()).then(res => setData(res.data))
  

• 排查搜索触发时的状态变更：检查搜索事件处理函数中，是否存在误将数据状态重置为undefined的逻辑，比如错误的setData调用。

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