数组过滤报错：Uncaught TypeError: 无法读取undefined的toLowerCase属性

1. 兜底 action.payload 解构 #

调用 dispatch(FILTER_ENTRIES) 时若未传入完整的entries或search，会直接导致解构报错。给参数加默认值避免此问题：

FILTER_ENTRIES(state, action) {
  // 给entries默认空数组，search默认空字符串
  const { entries = [], search = '' } = action.payload;
  const tempEntries = entries.filter((entry) => {
    const entryTitle = entry?.title?.toLowerCase() || '';
    const entryAuthor = entry?.author?.toLowerCase() || '';
    const searchText = search.toLowerCase();
    return entryTitle.includes(searchText) || entryAuthor.includes(searchText);
  });
  state.filteredEntries = tempEntries;
}

2. 彻底处理字段空值 #

即使使用可选链?.，若entry.title为null，调用toLowerCase()仍会报错。将空值转为空字符串再处理：

const entryTitle = entry?.title ? entry.title.toLowerCase() : '';
const entryAuthor = entry?.author ? entry.author.toLowerCase() : '';

3. 验证Store注册正确性 #

确保filter reducer已正确添加到Redux Store，且reducer的key与selectFiltered中的state.filter一致：

// store配置示例
import { configureStore } from '@reduxjs/toolkit';
import filterReducer from './path/to/filterSlice';

export const store = configureStore({
  reducer: {
    filter: filterReducer, // 此处key必须为filter
    // 其他reducer...
  },
});

4. 确保调用时机合理 #

如果在组件初始化时触发筛选，需等待entries数据加载完成后再调用dispatch，避免传入未初始化的空值：

// React组件中示例
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { FILTER_ENTRIES } from './filterSlice';

function YourComponent() {
  const dispatch = useDispatch();
  const [entries, setEntries] = useState([]);

  useEffect(() => {
    // 模拟数据请求
    fetch('/api/entries')
      .then(res => res.json())
      .then(data => {
        setEntries(data);
        // 数据加载完成后触发筛选
        dispatch(FILTER_ENTRIES({ entries: data, search: '' }));
      });
  }, [dispatch]);

  // ...组件其他逻辑
}

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