React+Redux博客文章过滤功能报错：categoryChangeHandler不是函数

我在个人React博客中用React+Redux实现文章过滤功能，点击分类展示对应文章时触发错误，报错信息如下，附上相关代码寻求解决：

SearchDetails.js:26 
       Uncaught TypeError: categoryChangeHandler is not a function
    at onClick (SearchDetails.js:26:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

相关代码 #

Redux Slice（search-post.js） #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    topics: [
      { id: 1, title: "An Introduction to React", category: "React" },
    ],
    filterPosts: [],
  };

const searchSlice = createSlice({
    name:"topic",
    initialState,
    reducers: {
        filterTopics(state, action){
            state.filterPosts = state.topics.filter((post)=>post.category === action.payload)
        }
    }
})

export const {filterTopics} = searchSlice.actions

export default searchSlice.reducer

SearchDetails组件 #

import React from 'react'

export default function SearchDetails({categoryChangeHandler,currentCategory}) {
    const {topics} = useSelector(state=>state.search)
    console.log(topics)

    const categories = []
    
    topics.map(post=>categories.push(post.category))

    const categoryFinal = ["All categories", ...new Set(categories)]

  return (
    <ul className="list-group">
      {categoryFinal.map((category) => (
        <li
          key={category}
          className={
            category === currentCategory
              ? "list-group-item active"
              : "list-group-item"
          }
          onClick={() => categoryChangeHandler(category)}
        >
          {category}
        </li>
      ))}
    </ul>
  )
}

SearchFilter组件 #

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useState } from 'react'
import searchPost from '../../store/search-post'
import SearchDetails from './SearchDetails'

export default function SearchFilter() {
    const [filter, setFilter] = useState(false)
    const [currentCategory, setCurrentCategory ] = useState("")
    const dispatch = useDispatch()

    const categoryHandlerChanger = (category) =>{
        setCurrentCategory(category)
        if(category === "All category"){
            setFilter(false)
        }else{
            dispatch(filterTopics(category))
            setFilter(true)
        }
    }
  return (
    <div>
        <searchPost filter={filter}/>
        <SearchDetails 
        currentCategory={currentCategory}
        categoryHandlerChanger={categoryHandlerChanger}
        />
    </div>
  )
}

SearchPost组件 #

export default function SearchPost({filter}) {
    const {topics} = useSelector(state=>state.search)
    const {filterTopics} = useSelector(state=>state.search)

    console.log(topics)
  return (
    <div>
      <p>{filter ? filterTopics.length : topics.length} of the {topics.length} posts</p>
      {!filter && topics.map((post)=>(
        <article key={post}>
            {post.title}
        </article>
      ))}

{filter && filterTopics.map((post)=>(
        <article key={post}>
            {post.title}
        </article>
      ))}
    </div>
  )
}

错误修复步骤 #

1. 修复props名称不匹配（核心报错原因） #

SearchFilter传给SearchDetails的props是categoryHandlerChanger，但SearchDetails接收的是categoryChangeHandler，名称不一致导致找不到函数：

<SearchDetails 
  currentCategory={currentCategory}
  categoryChangeHandler={categoryHandlerChanger} // 修正为接收方匹配的名称
/>

2. 修复组件调用大小写错误 #

React组件必须首字母大写，同时修正导入名称：

import SearchPost from './SearchPost' // 确保导入路径正确
// ...
<SearchPost filter={filter}/> // 首字母大写

3. 修复Redux状态字段名称错误 #

SearchPost中取的filterTopics和slice定义的filterPosts字段不符：

const {filterPosts} = useSelector(state=>state.search)
// ...
<p>{filter ? filterPosts.length : topics.length} of the {topics.length} posts</p>
// ...
{filter && filterPosts.map((post)=>(
  <article key={post.id}>
      {post.title}
  </article>
))}

4. 修复分类名称拼写不一致 #

SearchDetails生成的是"All categories"，但SearchFilter判断的是"All category"，少了s：

const categoryHandlerChanger = (category) =>{
    setCurrentCategory(category)
    if(category === "All categories"){ // 修正为一致的名称
        setFilter(false)
    }else{
        dispatch(filterTopics(category))
        setFilter(true)
    }
}

5. 补全缺失的导入 #

• SearchDetails和SearchPost需导入useSelector：

import { useSelector } from 'react-redux'

• SearchFilter需导入filterTopics action：

import { filterTopics } from '../../store/search-post'

• 删除SearchFilter中重复的useState导入：

// 删掉重复的这一行
import { useState } from 'react'

6. 修复遍历key的问题 #

用post的唯一id作为遍历key，避免对象key不稳定：

{!filter && topics.map((post)=>(
  <article key={post.id}> // 改为post.id
      {post.title}
  </article>
))}

内容的提问来源于stack exchange，提问作者Aderoba Dayo Jerry