取消选择所有标签时如何预加载所有电影？

Question

我正在为我的项目构建一个小功能，基本上我有一个电影对象数组，其中包含电影名称和为该电影分配的标签。我想根据选择的标签显示电影，即如果选择“喜剧”标签，那么将显示所有以“喜剧”作为标签之一的电影

为此，我维护了一个映射，其中包含作为“标记名”的键及其“状态”，即 (seleted/unselected) 作为状态形式的值。我已经为它编写了逻辑，但我怀疑每当页面首先加载时，所有电影都应该显示，因为默认情况下加载时没有选择标签，我应该如何实现它，因为我正在初始化状态中的所有值（地图）为假（未选择）。请帮忙，这是我到目前为止实现的沙箱 link - https://codesandbox.io/s/movie-tags-exp-4mur0?file=/src/Tags.js

Answer 1

您可以对代码进行以下更改，

与其将状态维护为一个对象，不如维护一个列表，您可以在其中添加和删除标签
```
    const [selectedTags, setSelectedTags] = useState([]);
```

#1 就位后，您现在可以添加和删除标签，如下所示

const manipulate = (tag) => {
    if (selectedTags.includes(tag)) {
      setSelectedTags((prevSelectedTags) =>
        prevSelectedTags.filter((existingTag) => existingTag !== tag)
      );
    } else {
      setSelectedTags((prevSelectedTags) => [...prevSelectedTags, tag]);
    }
  };

更新所选标签的样式将更改为

 backgroundColor: selectedTags.includes(tagname) ? "green" : "white"

您可以删除 check，因为您过滤的数据是基于所选标签的派生状态。现在您可以过滤为

 const filteredData =
    selectedTags.length > 0
      ? data.filter((movie) =>
          movie.tags.some((tag) => selectedTags.includes(tag))
        )
      : data;

过滤后，您可以使用 filteredData 呈现您的电影列表

{filteredData.map((movie, index) => {
        return (
          <div key={index}>
            <h3>{movie.name}</h3>
            <p>{movie.desc}</p>
            <br />
          </div>
        );
      })}

工作沙盒

Filter Movies Based on Tags

取消选择所有标签时如何预加载所有电影？

How do I preload all the movies when all the tags are unselected?

javascript

json

reactjs

react-hooks

use-state