多个复选框过滤反应状态

Question

我试图使用多个复选框过滤状态。

我让它在某种程度上起作用，因为你可以检查一种类型来过滤那些类型的电影。

在未选中复选框后，我很难“恢复状态”，同时也允许选择多个筛选器。

我尝试过使用json.stringify克隆原始状态，并按照其他堆栈溢出问题中的建议，克隆原始状态，但这似乎对我不起作用，有些人说，这是一种将其全部结合在一起的糟糕方法。

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

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，但我认为您将管理这一点。