React中如何通过多个复选框获取筛选后的数据

你的代码核心问题在于每次筛选时直接修改了posts状态，导致原始完整数据丢失。选中第一个复选框后，posts已变为仅包含该用户的数据，此时再选其他用户，筛选的是已过滤后的数据集，自然找不到匹配项，最终显示为空。

要实现多复选框联合筛选，需做到以下几点：

• 保存一份原始数据副本，避免每次筛选丢失全量数据
• 维护数组跟踪所有选中的用户ID
• 根据选中的用户ID列表，从原始数据中筛选结果

import React, { useEffect, useState } from 'react'

const Filter = () => {
    // 存储原始完整数据
    const [originalPosts, setOriginalPosts] = useState([])
    // 存储当前筛选后的数据
    const [posts, setPosts] = useState([])
    // 跟踪选中的用户ID列表
    const [selectedUserIds, setSelectedUserIds] = useState([])

    useEffect(() => {
        fetchData()
    }, [])

    // 获取原始数据
    const fetchData = async () => {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts")
        const data = await res.json()
        setOriginalPosts(data)
        setPosts(data)
    }

    // 处理复选框状态变化
    const handleCheckboxChange = (e, userId) => {
        const { checked } = e.target
        if (checked) {
            // 添加选中的用户ID到列表
            setSelectedUserIds(prev => [...prev, userId])
        } else {
            // 从列表中移除取消选中的用户ID
            setSelectedUserIds(prev => prev.filter(id => id !== userId))
        }
    }

    // 根据选中的用户ID筛选数据
    useEffect(() => {
        if (selectedUserIds.length === 0) {
            // 没有选中任何选项时显示全部数据
            setPosts(originalPosts)
        } else {
            // 筛选出所有选中用户ID对应的帖子
            const filteredPosts = originalPosts.filter(post => 
                selectedUserIds.includes(post.userId)
            )
            setPosts(filteredPosts)
        }
    }, [selectedUserIds, originalPosts])

    return (
        <div>
            <h2>筛选数据</h2>
            {/* 统一使用onChange事件，保持一致性 */}
            <label>Userid1</label>
            <input type="checkbox" value='a' name='filter' onChange={(e) => handleCheckboxChange(e, 1)} />
            <label>Userid2</label>
            <input type="checkbox" value='b' name='filter' onChange={(e) => handleCheckboxChange(e, 2)} />
            <label>Userid3</label>
            <input type="checkbox" value='c' name='filter' onChange={(e) => handleCheckboxChange(e, 3)} />
            <label>Userid4</label>
            <input type="checkbox" value='d' name='filter' onChange={(e) => handleCheckboxChange(e, 4)} />
            <label>Userid5</label>
            <input type="checkbox" value='e' name='filter' onChange={(e) => handleCheckboxChange(e, 5)} />
            <label>Userid6</label>
            <input type="checkbox" value='f' name='filter' onChange={(e) => handleCheckboxChange(e, 6)} />
            <label>Userid7</label>
            <input type="checkbox" value='g' name='filter' onChange={(e) => handleCheckboxChange(e, 7)} />
            <label>Userid8</label>
            <input type="checkbox" value='h' name='filter' onChange={(e) => handleCheckboxChange(e, 8)} />
            <label>Userid9</label>
            <input type="checkbox" value='i' name='filter' onChange={(e) => handleCheckboxChange(e, 9)} />
            <label>Userid10</label>
            <input type="checkbox" value='j' name='filter' onChange={(e) => handleCheckboxChange(e, 10)} />

            {posts.map((item) => (
                <div key={item.id}>
                    <div>{item.userId} ---- {item.title}</div>
                    <hr />
                    <div>{item.body}</div>
                </div>
            ))}
            <hr />
        </div>
    )
}

export default Filter

• 新增originalPosts状态存储完整原始数据，确保每次筛选都基于全量数据
• 使用selectedUserIds数组跟踪所有选中的用户ID，避免直接修改展示数据
• 通过useEffect监听选中状态变化，自动重新筛选数据
• 统一使用onChange事件处理复选框状态（修复了第一个复选框使用onClick的不一致问题）

内容的提问来源于stack exchange，提问作者Zahid Hussain