React中使用filter函数触发Undefined报错的问题排查

核心问题 #

你遇到的错误根源是**useReducer的push动作错误地将服务器返回的数组作为单个元素存入状态，导致SavedEvents变成二维数组**，同时缺乏对状态的安全校验，在某些渲染周期中触发了未定义值的访问。

具体修正步骤 #

1. 修正useReducer的push逻辑

当前push动作直接将整个响应数组作为单个元素添加到状态中，导致SavedEvents结构为[[数据数组]]，而非预期的[数据项, 数据项...]。修改reducer的push分支：

function savedEventsReducer(state, { type, payload }) {
  switch (type) {
    case "push":
      // 展开payload数组，将每个数据项单独存入状态
      return [...state, ...payload];
    case "update":
      return state.map((evt) =>
        evt.id === payload.id ? payload : evt
      );
    case "delete":
      return state.filter((evt) => evt.id !== payload.id);
    default:
      throw new Error();
  }
}

2. 调整数据过滤与标签生成逻辑

移除所有对SavedEvents[0]的引用，直接使用SavedEvents，同时增加安全校验避免未定义访问：

const [Lables, SetLables] = useState([])

const filteredEvents = useMemo(() => {
  // 先校验状态是否为有效数组
  if (!Array.isArray(SavedEvents) || SavedEvents.length === 0) {
    return [];
  }
  // 提前计算选中的标签集合，避免重复计算
  const checkedLabels = Lables
    .filter((lbl) => lbl.checked)
    .map((lbl) => lbl.label);
  return SavedEvents.filter((evt) => checkedLabels.includes(evt.label));
}, [SavedEvents, Lables])

useEffect(() => {
  if (!Array.isArray(SavedEvents) || SavedEvents.length === 0) {
    return;
  }
  SetLables((prevLabels) => {
    // 提取所有唯一标签
    const uniqueLabels = [...new Set(SavedEvents.map((evt) => evt.label))];
    return uniqueLabels.map((label) => {
      const currentLabel = prevLabels.find(
        (lbl) => lbl.label === label
      );
      return {
        label,
        checked: currentLabel ? currentLabel.checked : true,
      };
    });
  });
}, [SavedEvents])

3. 完善请求错误处理

给axios请求添加错误捕获，避免未处理的Promise异常：

useEffect(() => {
  axios.get('http://localhost:8000/SavedEvents/')
    .then(resp => {
      // 确保响应数据是数组，若为单个对象则包装成数组
      const data = Array.isArray(resp.data) ? resp.data : [resp.data];
      dispatchcallEvent({ type: 'push', payload: data });
    })
    .catch(err => {
      console.error('获取SavedEvents数据失败:', err);
    });
}, [])

为什么之前会报错？ #

• 原push动作生成二维数组，若后续状态被其他操作（如delete）修改，可能导致SavedEvents[0]变为undefined，但console.log的异步特性会在你查看时显示已更新的状态，造成“打印有数据但执行报错”的错觉。
• 缺乏对状态类型的校验，当状态未初始化完成时，直接访问filter方法触发未定义错误。

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