多个复选框过滤反应状态

Question

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

我让它在某种程度上起作用，因为您可以检查一种类型以按该类型过滤电影。

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

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

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

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

如果有人能指出我正确的方向，我将不胜感激。即使它只是一个链接到一个体面的文章或教程，这将是超级有用的。 这个社区最近在学习这些东西时拯救了我！

Answer 1

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

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 的更新方式，但我认为你会处理好。

Answer 2

你可以选择以前的答案，也可以像下面这样：

第一个选项：将所有数据保持在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,
        });
    });

证明了这个here