多个复选框过滤状态

Question

我正在尝试使用多个复选框过滤状态。

我有某种程度的工作，因为您可以检查一种流派，以该流派过滤电影。

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

我已经尝试使用json.stringify克隆原始状态，并按照其他一些stackoverflow问题中的建议克隆了deepdeep，但是这似乎对我不起作用，有人说这是一起做这件事的不好方法。

我在这里创建了应用程序当前状态的堆栈闪电：

https://stackblitz.com/edit/react-9t8f6e

如果有人能指出正确的方向，我将不胜感激。 即使只是一个不错的文章或教程的链接，这也将非常有帮助。 这个社区最近救了我学习这个东西的屁股！

Answer 1

您可以选择以前的答案，也可以按照以下步骤操作：

第一种选择：将所有数据保持在movies和defaultData状态两种状态

要过滤和删除/取消使用movies ，要还原为所有电影，请使用defaultData

在您的示例中，您已使用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,
        });
    });

在这里证明了这一点

Answer 2

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

1. 更新状态或道具会导致渲染。
2. filter将创建一个新数组。

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

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

您可以在render方法中使用它：

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

该方法将在每次渲染时调用，每当state.selectedGenres更新时都会触发该方法。

现在缺少的是state.selectedGenres的更新方式，但是我认为您可以进行管理。