Question

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

在某种程度上，它可以正常工作，因为您可以检查一种流派，以该流派过滤电影。

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

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

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

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

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

Answer 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的更新方式，但是我认为您将对此进行管理。

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

多个复选框过滤状态

2 个答案: