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

Question

我正在尝试通过过滤来呈现书签卡。我有一个调用 filterByCategory 的事件处理程序。在那里，我调用我的道具来遍历书签集合并仅返回其 category_id 与 e.target 的值匹配的 BookmarkCard；其中“e.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

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

添加本地状态来保存类别id过滤器值并在渲染时过滤props数组。

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 2

Map 返回一个新数组，它不会更改现有数组。此外，您不应该尝试修改道具，它是不可变的。

这里我在组件挂载时将书签放在一个状态中，当您更改类别时，它将使用作为道具传递的原始书签更新状态，这是一个示例（我没有编码）

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

}

Answer 3

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

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>

我希望它有效！