多个复选框过滤反应状态

Posted 2023-02-22

【中文标题】多个复选框过滤反应状态

【英文标题】：Multiple checkbox filtering react state

【发布时间】：2019-06-23 10:36:27

【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

您真的应该尝试在帖子本身中包含所有需要帮助的信息。现在重要的部分在链接后面。

@SamiHult 道歉 - 上次我发布了一个问题，每个人都要求我把它放在 stackblitz 上，所以我认为如果这次我先这样做会更有帮助。

检查一次，***.com/questions/38133137/…，它可能对你有帮助

@Sparker Parker 你做错了。您应该获取所有电影数据并将状态存储到另一个变量 allMovies 中，然后当复选框更改时，您应该获取所有 checkboxes 并根据它们进行过滤。但是将所有 movies 保留在一个单独的状态变量中

您是否正在寻找类似stackblitz.com/edit/react-cbkfx4 的解决方案？

【参考方案1】：

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

更新状态或道具会导致渲染。 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 的更新方式，但我认为你会处理好。

【参考方案2】：

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

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

过滤和删除/取消使用movies，恢复到所有电影使用defaultData

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

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

    // Fetch 'Now Playing' Data
    axios.get(`$base_urlmovie/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_urlmovie/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

【讨论】：

谢谢你。将其付诸实践后，我可以看到它确实有效，但是当您开始取消选中某些过滤器时，它当然不会应用仍处于选中状态的过滤器，而是返回默认状态。有没有办法轻松克服这个问题？

你检查过我的第二个选项吗？

我做到了，谢谢。如果一个被删除，它不处理仍然勾选的复选框。它只是重置为默认状态。

而不是进入默认状态，您需要整理出哪些被过滤，哪些不是！我将在stackblitz.com/edit/react-cbkfx4

中更新一个简单的解决方法

非常感谢。