Как отфильтровать массив данных с помощью нескольких флажков

Question

Я собираюсь отфильтровать данные, установив другой флажок с помощью следующих кодов:

const movieData = [
  {
    title: "movie 0",
    genre: ""
  },
  {
    title: "movie 1",
    genre: ["action", "thriller"]
  },
  {
    title: "movie 2",
    genre: ["comedy", "drama"]
  },
  {
    title: "movie 3",
    genre: ["comedy", "action"]
  },
  { title: "movie 4", genre: "thriller" },
  {
    title: "movie 5",
    genre: "comedy"
  },
  {
    title: "movie 6",
    genre: "action"
  },
  {
    title: "movie 7",
    genre: "drama"
  }
];

const movie = [
  { genre: "thriller" },
  { genre: "comedy" },
  { genre: "action" },
  { genre: "drama" }
];

const FilterMethod01 = () => {
  const [genre, setGenre] = useState([""]);
  const [filteredGenre, setFilteredGenre] = useState([""]);

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

  useEffect(() => {
    setFilteredGenre(
      movieData.filter(movie =>
        genre.some(category => category === movie.genre)
      )
    );
  }, [genre]);

  return (
    <Fragment>
      <FormControl>
        <FormGroup>
          {movie.map(movie => (
            <FormControlLabel
              control={<Checkbox onChange={handleChange} />}
              label={movie.genre}
              value={movie.genre}
            />
          ))}
        </FormGroup>
      </FormControl>

      {filteredGenre
        .map((movie, index) => (
          <Card style={{ background: "lightgreen", marginBottom: "5px" }}>
            <Typography gutterBottom variant="h6" noWrap>
              title: {movie.title}
            </Typography>
            <Typography gutterBottom variant="h6" noWrap>
              genre: {movie.genre}
            </Typography>
          </Card>
        ))}
    </Fragment>
  );
};

Однако у меня есть следующие проблемы с этим кодом:

1. Все сопоставленные данные ["movie 0", "movie 1", "movie 2", "movie 3"...] не отображаются по умолчанию. Как я могу сделать так, чтобы все сопоставленные данные отображались по умолчанию?

2. Сопоставленные данные фильтруют только одну строку (например, {genre: ""}) вместо массива строк (например, {genre: ["thriller", "action"]} ). Как установить флажок «действие», чтобы отобразились «mov ie 1», «mov ie 3» и «mov ie 6»? # Оформить заказ мой коды и здесь . # Если есть другие лучшие методы для достижения этого результата, дайте мне знать. Спасибо большое, ребята!

Answer 1

Вот несколько предложений, вы должны сохранять единообразие при объявлении массивов объектов и массива внутри. 1004 *

* CMIIW, потому что я новенький: D

Answer 2

Есть некоторые исправления:

• удалить неоднозначную пустую строку:

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

• если ничего не фильтровать, просто вернуть все mov ie data
• если фильтр, вернуть любые данные mov ie, которые включают жанр отфильтрованного. Сложная часть здесь заключается в том, что жанр mov ie data имеет несколько типов, массивов и строк, поэтому простой способ справиться с этим - обернуть его в массив, а затем плоский

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

Ниже приведен разветвленные коды и ящик

Редактировать flamboyant-lake-brw26