按类别特征进行反应过滤答案

【问题标题】：React filter by category feature按类别特征进行反应过滤
【发布时间】：2021-03-30 02:17:45
【问题描述】：

您好，我正在构建照片库，我想在其中添加用户可以按类别过滤的功能。我尝试了一些解决方案，但有两个错误我无法修复。首先，如果我转到 GalleryPage（使用 Swtich），它不会呈现从 FilterButton 组件动态添加的按钮。我必须在链接上再单击一次，然后它才会呈现按钮。我不知道为什么它在第一次渲染时不起作用。

其他问题是我可以按类别过滤，但它会导致 useEffect 中的无限循环，我不知道如何解决它。

我有 GalleryPage 组件，我从 API 获取数据并解析数据以供以后在其他组件中使用。这里似乎一切正常。

const GalleryPage = () => {
    const url = 'someurl';
    const [data, setData] = useState([]);
    const [categoryList, setCategoryList] = useState([]);
    const [category, setCategory] = useState('All');

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(url,);
            setData(result.data)
            result.data.forEach(item => {
                imageUrl.push(item.image)
                if (categoryList.indexOf(item.group) === -1) { 
                      categoryList.push(item.group)
                }
            })
         }
         fetchData();
         }, [])       

    return (
       <FilterButton setCategory={setCategory} categoryList={categoryList}/>
       <Gallery data={data} category={category}/>
    )
}

如果我转到 GalleryPage，则会呈现 h3 和“全部”按钮。但是我必须再点击一次链接才能在地图功能中呈现按钮：

const FilterButton = ({setCategory, categoryList}) => {
    return(
        <h3>Gallery</h3>
        <button onClick={()=> setCategory('All')}>All</button>
        {categoryList.map(item => (
           <button key={item} onClick={()=> setCategory(item)}>{item}</button>
        ))}
     )

};

export default FilterButton;

在这里我无法修复无限循环：

const Gallery = ({data, category}) => {
    const [photos, setPhotos] = useState([]);
    
    useEffect(()=>{
        let temp = []
        if (category === 'All'){
            setPhotos(data)          
        }else{
            data.map(item => {
               temp.push(item)
            })
        }
        setPhotos(temp)
    }) 
    return(
       photos.map((item => 
           <img key={item.id} src={item.image}/>
       ))
    )
};

export default Gallery;

如果我将空数组添加到 useEffect 它根本不起作用。我也在使用样式化组件和成帧器运动，但我希望它不会对此产生影响。

【问题讨论】：

你不要push到categoryList，它是不可变的，你需要改变状态，比如setCategoryList([...categoryList, item.group])，先过滤数据再用setCategoryList改变状态跨度>
@zb22 我在 GalleryPage 中将 categoryList.push(item.group) 更改为 setCategoryList([...categoryList, item.group])，但它只将最后一个值添加到数组中。

标签： javascript reactjs filter gallery infinite-loop

【解决方案1】：

首先，我看到您从未为 categoryList 设置状态。修改 categoryList 后，您应该使用新的类别列表调用 setCategoryList()。这样，当组件重新渲染时，状态变量将被“记住”。您可以阅读有关 useState 挂钩 here.

另外，对于 useEffect 钩子，最后传入的“空数组”实际上是一个变量数组，用于“监视”更改。如果您传递一个空数组，则 useEffect 只会在第一个页面加载时运行一次。但是，您可以传入 [category] 之类的内容，以便仅在修改 category 变量时调用 useEffect，我认为这是您想要做的。

【讨论】：

我试过了，但是当页面加载时它不会渲染任何图像。我必须更改category 的状态，然后再渲染它。
可能是因为您将category 状态初始化为空数组？尝试使用 useState('All'); 之类的内容对其进行初始化
这正是我正在做的。类别的初始状态是“全部”我更新了代码，所以它在那里。