Javascript 多复选框过滤反应状态

我正在尝试使用多个复选框筛选状态

在某种程度上，我认为它是可行的，因为你可以检查一种类型的电影，按该类型过滤电影

在复选框被取消选中后，我正在努力“恢复状态”，并且还允许选择多个过滤器

我曾尝试使用json.stringify和clonedeep克隆原始状态，正如其他一些stackoverflow问题中所建议的那样，但这似乎对我不起作用，有人说这是一种很糟糕的方法

我在这里创建了应用程序当前状态的stackblitz：

---

如果有人能给我指出正确的方向，我将非常感激。即使只是一篇不错的文章或教程的链接，也会非常有用。最近学习这些东西，这个社区救了我一命

我会这样做的。首先是一些重要的概念：

更新状态或道具将导致渲染

filter

将创建一个新数组

这意味着您可以使用一种方法动态计算过滤后的阵列：

filteredMovies = () => 
    this.state.movies.filter(movie =>
        this.state.selectedGenres.every(genreId =>
            movie.genre_ids.includes(genreId)
        )
    );

您可以在

渲染方法中使用此选项：

<NowPlaying movies={this.filteredMovies()} />



每次渲染时都会调用该方法，只要更新了
状态，就会触发该方法。selectedGenres

现在缺少的部分是如何更新
状态。selectedGenres
，但我想你会处理好的。
你可以使用前面的答案，也可以按以下方式操作：

第一个选项：将所有数据保持在两种状态，如
电影
和
默认数据
状态

对于筛选和删除/取消，请使用
电影
；对于恢复到所有电影，请使用
默认数据

在您的示例中，您已经使用componentWillMount来获取数据，请改用componentDidMount

// Fire API on init
componentDidMount() {
    // Fetch Genre Data
    axios.get(`${base_url}genre/movie/list?api_key=${api_key}`)
        .then(res => this.setState({ genres: res.data.genres }));

    // Fetch 'Now Playing' Data
    axios.get(`${base_url}movie/now_playing?api_key=${api_key}&language=en-US&page=1`)
        .then(res => this.setState({
            movies: res.data.results, // for filter/remove
            isLoaded: true,
            defaultData: res.data.results //this will store default data
        }));
}

第二种选择：

您可以为数据服务创建一个单独的文件，并在需要时重用它，如恢复、撤消

GetData.js

 import axios from 'axios';

// TMDB Info/Credentials
const base_url = "https://api.themoviedb.org/3/";
const api_key = "39b616a19667f17d8ffcaa175fc93491";


export function data() {
   return axios.get(`${base_url}movie/now_playing?api_key=${api_key}&language=en-US&page=1`)
       .then(res => res.data) 
}

和在App.js中

import {data} from './components/GetData';

data().then(data=>{ 
        this.setState({
          movies: data.results,
          isLoaded: true,
        });
    });

演示了这一点
你真的应该尝试在帖子中包含帮助你所需的所有信息。现在重要的部分在一个链接后面。@SamiHult抱歉-上次我发布一个问题时，每个人都让我把它放到stackblitz上，所以认为这次我先做会更有帮助。检查一下，可能会有帮助you@Sparker帕克：你做错了。您应该获取所有电影数据并将其存储到另一个变量的状态中，然后当复选框被更改时，您应该获取所有的复选框并根据它们进行过滤。但是将所有的
电影
放在一个单独的状态变量中。您在寻找这样的解决方案吗？谢谢。在实践中，我可以看到它确实有效，但是当您开始取消选中某些过滤器时，它当然不会应用仍然选中的过滤器，而是返回默认状态。有没有办法轻松克服这个问题？你检查过我的第二个选择吗？我检查过了是的，谢谢。但是，如果删除了复选框，它不会处理仍然勾选的复选框。它只是重置为默认状态。而不是转到默认状态，您需要整理哪些已过滤，哪些未过滤！我将更新一个简单的工作在感谢你这么多。