如何在ReactJS中按类别id过滤结果

Question

我试图通过过滤呈现书签卡。我有一个调用filterByCategory的事件处理程序。在这里，我调用我的props来遍历书签集合，并只返回其category_id与e.target的值匹配的BookmarkCards;其中"。target"是下拉菜单的选定选项。

下面是我的代码:

//containers/Bookmarks.js
import React from 'react'
import BookmarkCard from './BookmarkCard'
import BookmarkForm from '../components/BookmarkForm'
import CategoryForm from '../components/CategoryForm'
import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem' 
import { connect } from 'react-redux'
import { filterByCategory } from '../actions'

const Bookmarks = (props) => {


const renderBookmarkCollection = () => {
return props.bookmarks.map(bookmark => {
return <BookmarkCard key={bookmark.id} {...bookmark}/>
})
}
const filterByCategory = (e) => {
debugger
props.bookmarks.map((bookmark) => {
if (bookmark.category_id == e.target.value) {
return <BookmarkCard key={bookmark.id} category_id={bookmark.category_id} {...bookmark}/> 
} else {
return null 
}
})
}

return (
<div className="bookmarks-container">
<br></br>
<BookmarkForm />
<CategoryForm/>
<form className="filter-category">
<p>FILTER BY CATEGORY</p>
<Select id="category-input" value={props.categories} onChange={(e) => filterByCategory(e)}>
{props.categories.map(category => {
return (
<MenuItem key={category.id} name={category.name} value={category.id} >{category.name}</MenuItem>
)
})}
</Select>
</form>
<br></br>
{renderBookmarkCollection()}      
</div>
)
}
const mapStateToProps = (currentState) => {
return {
bookmarks: currentState.bookmarks.bookmarks,
categories: currentState.categories.categories
}
}
const mapDispatchToProps = (dispatch) => {
return {
filterByCategory: (id) => dispatch(filterByCategory(id))
}
}

export default connect(mapStateToProps, mapDispatchToProps)(Bookmarks)

因此，我不会退还任何"书签卡"。

//containers/BookmarkCard.js
import React from 'react'
import Button from "@material-ui/core/Button"
import DeleteIcon from "@material-ui/icons/Delete"
import FavoriteIcon from "@material-ui/icons/Favorite"
import { useHistory } from 'react-router-dom'
import { connect } from 'react-redux'
import { deleteBookmark, favoriteBookmark } from '../actions/index'

const BookmarkCard = (props) => {
const history = useHistory()

const handleFavorite = () => {
favoriteBookmark()
history.push('/bookmarks')
}
const handleDelete = () => {
deleteBookmark()
history.push('/bookmarks')

}

return (
<div className="bookmark-card" id={`bookmark-${props.id}`}>
<h2 className="bookmark-headline">{props.headline}</h2>
<p className="bookmark-description">{props.description}</p>
<p className="bookmark-web-url" >{props.web_url}</p>
<Button 
id={props.id}
onClick={handleFavorite}
className="favorite-button" 
startIcon={<FavoriteIcon/>}>
</Button><br></br>
<Button
id={props.id}
size="small"
startIcon={<DeleteIcon />}
onClick={handleDelete}
className="delete-button">
</Button><br></br>
</div>
)
}


const mapDispatchToProps = (dispatch) => {
return {
deleteBookmark: (id) => dispatch(deleteBookmark(id)),
favoriteBookmark: (id) => dispatch(favoriteBookmark(id))
}
}

export default connect(null, mapDispatchToProps)(BookmarkCard)

Answer 1

我以前做过。我希望我的问题能解决你的。

import react, { useState, useEffect }  from 'react';
// This is an array 
const [filteringBookmark, setFilteringBookmark] = useState([]);
// text for you filter
const [ search , setSearch ] = useState('');
// This code output an array maybe complete or filtered while your main 
// array ( bookmarks ) change or text of search change too.
useEffect( () => {
setFilteringBookmark( bookmarks.filter( book => {
// filter your text to lowercase if you want  
return book.includes( search.toLowerCase() )
}) 
)
}, [search, bookmarks])

所以在jsx中应该是这样的:

<form className="filter-category">
<p>FILTER BY CATEGORY</p>
<Select id="category-input" value={props.categories} onChange={(e) => 
setSearch(e)}
>
{filteringBooksmark.map(category => (
<MenuItem key={category.id} name={category.name} value={category.id} > 
{category.name}
</MenuItem>
)}
</Select>
</form>

我希望它能工作!

Answer 2

这里的问题是，您试图从回调中返回JSX，而这根本不是React的工作方式。你想要渲染的所有东西都需要从组件的函数体中返回。

添加本地状态来保存类别id过滤值，并在渲染时内联过滤道具数组

const Bookmarks = (props) => {
const [categoryId, setCategoryId] = React.useState("");

const renderBookmarkCollection = () => {
return props.bookmarks
.filter(bookmark => bookmark.category_id === categoryId))
.map(bookmark => {
return <BookmarkCard key={bookmark.id} {...bookmark}/>
});
}
const filterByCategory = (e) => {
setCategoryId(e.target.value);
}

return (
<div className="bookmarks-container">
<br></br>
<BookmarkForm />
<CategoryForm/>
<form className="filter-category">
<p>FILTER BY CATEGORY</p>
<Select
id="category-input"
value={props.categories}
onChange={filterByCategory}
>
{props.categories.map(category => {
return (
<MenuItem
key={category.id}
name={category.name}
value={category.id}
>
{category.name}
</MenuItem>
)
})}
</Select>
</form>
<br></br>
{renderBookmarkCollection()}      
</div>
);
}

Answer 3

Map返回一个新的数组，它不改变现有的数组。此外，你不应该试图修改props，它是不可变的。

这里我把书签放在一个状态当组件挂载，当你改变类别它会更新状态使用原始书签作为一个道具传递，这是一个例子(我没有编码它)

const Bookmarks = (props) => {
const [ bookmarks, setBookmarks ] = React.useState([])
React.useEffect(() => {
setBookmarks(props.bookmarks)
}, [props.bookmarks])

const renderBookmarkCollection = () => {
return bookmarks.map(bookmark => {
return <BookmarkCard key={bookmark.id} {...bookmark}/>
})
}
const filterByCategory = (e) => {
debugger
// This is filtering from props.bookmarks, which should be the original array
setBookmarks(props.bookmarks.map((bookmark) => {
if (bookmark.category_id == e.target.value) {
return <BookmarkCard key={bookmark.id} category_id={bookmark.category_id} {...bookmark}/> 
} else {
return null 
}
}))
}

return (
<div className="bookmarks-container">
<br></br>
<BookmarkForm />
<CategoryForm/>
<form className="filter-category">
<p>FILTER BY CATEGORY</p>
<Select id="category-input" value={props.categories} onChange={(e) => filterByCategory(e)}>
{props.categories.map(category => {
return (
<MenuItem key={category.id} name={category.name} value={category.id} >{category.name}</MenuItem>
)
})}
</Select>
</form>
<br></br>
{renderBookmarkCollection()}      
</div>
)
}