React中的多个过滤器（搜索栏＆amp;复选框）

Question

嗨，我对React中的多个过滤器有疑问。 我有一个搜索栏和复选框过滤器，并且每个都可以自行运行，但是如果我使用两个过滤器，则只有一件作品。我需要他们一起工作。有人知道该怎么做吗？

这是我的团队。

const [genre, setGenre] = useState([]);
const [filteredGenre, setFilteredGenre] = useState([]);

    const handleChange = e => {
        if (e.target.checked) {
            setGenre([...genre, e.target.value]);
            return e;
        } else {
            setGenre(genre.filter(id => id !== e.target.value));
            return e;
        }
    };

    useEffect(() => {
        if (genre.length === 0) {
            setFilteredGenre(players);
        } else {
            setFilteredGenre(
                players.filter(position =>
                    genre.some(category => [position.position].flat().includes(category))
                )
            );
        }
    }, [genre]);


    const [value, setValue] = useState('');
    const handleSearch = (e) => {
        setValue(e.target.value)
    }
    const filteredEvent = players.filter(events => {
        return events.name.toLowerCase().includes(value.toLowerCase());
    });
   
    return (
        <>
            <SectionContent columns={2}>
                <Left>
                    <Filter
                        handleChange={handleSearch}
                        handlePositionChange={handleChange}
                    />
                </Left>
                <Right>
                    <Grid>
                        {filteredGenre.map(info => (
                            <Cards
                                key={info.id}
                                img={info.imgUrl}
                                alt={info.imgAlt}
                                numberInfo={info.number}
                                name={info.name}
                                position={info.position}
                                age={info.age}
                                nationality={info.nationality}
                                value={info.value}
                            />
                        ))}
                    </Grid>
                </Right>
            </SectionContent>
        </>
    );
};

Answer 1

我正在处理完全相同的情况，最后，我通过compaine均通过“某些”方法过滤和“包括”方法来使它起作用。