javascript - 多个复选框过滤 react 状态

Question

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

我已经在某种程度上发挥了作用，因为您可以检查一种类型以按该类型过滤电影。

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

我已经尝试使用 json.stringify 克隆原始状态，也按照其他一些 stackoverflow 问题中的建议克隆了原始状态，但这似乎对我不起作用，有些人说这是一起完成这一切的糟糕方法。

我在这里创建了应用程序当前状态的 stackblitz:

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
        }));
}

第二个选项:

您可以为数据服务创建一个单独的文件，并在需要时重复使用它，例如恢复、撤消等情况

获取数据.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