我想在我的react博客中实现一个filterPost

Question

我想在我的博客文章中使用react和react Redux实现一个filterPost，但是当我尝试实现一个函数时，用户单击在过滤器数组中列出帖子，我得到了我试图找到一种可能的方法。但我还是得到了相同的错误。可能是因为我还是react的初学者，想要巩固我的知识。

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

这是搜索细节。

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>
)
}

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>
)
}

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>
)
}

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

Answer 1

您在SearchFilter中有一个错字，您将功能传递为categoryHandlerChanger但SearchDetails期望categoryChangeHandler

handlerChanger vs changeHandler:)