javascript - 如何在反应原生中一次在多个状态下使用过滤器功能

Question

我想一次过滤来自多个状态的数据。但我只得到第二个状态的数据。我有两个州，两个州都从单独的 api 获取单独的数据。现在我想从中过滤数据。谢谢你我不知道我做错了什么，所以请帮助我并查看我的代码。

searchFeatured = value => {
  const filterFeatured = (
    this.state.latestuploads || this.state.featuredspeakers
  ).filter(item => {
    let featureLowercase = (item.name + " " + item.title).toLowerCase();
    let searchTermLowercase = value.toLowerCase();
    return featureLowercase.indexOf(searchTermLowercase) > -1;
  });
  this.setState({
    featuredspeakers: filterFeatured,
    latestuploads: filterFeatured
  });
};


    class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      featuredspeakers: [],
      latestuploads: [],
    };
  }

  componentDidMount() {
    axios
      .all([
        axios.get(
          'https://staging.islamicmedia.com.au/wp-json/islamic-media/v1/featured/speakers',
        ),
        axios.get(
          'https://staging.islamicmedia.com.au/wp-json/islamic-media/v1/featured/latest-uploads',
        ),
      ])
      .then(responseArr => {
        //this will be executed only when all requests are complete

        this.setState({
          featuredspeakers: responseArr[0].data,
          latestuploads: responseArr[1].data,

          loading: !this.state.loading,
        });
      });
  }

标签： javascriptreactjsreact-nativefilter

Answer 1

艾哈迈德，我根本无法让你的代码工作 -searchFeatured没有在任何地方调用。但我有一些想法，希望能有所帮助。

我看到你正在设置featuredspeakers和latestuploads。componentDidMount这些是包含大量数据的大型数组。

但是，在 中searchFeatured，您将完全覆盖您下载的数据并将其替换为搜索/过滤结果。你真的打算这样做吗？

此外，正如其他人提到的那样，您对||运算符的使用只是返回第一个数组，this.state.latestuploads，因此只有该数组被过滤。

一个可能有帮助的建议是设置一个非常简单的演示类，它只执行您想要的过滤。根本不要使用axios。相反，使用一些模拟数据设置初始状态 - 一个只有几个元素的数组。使用它以您想要的方式修复过滤器和搜索功能。这是一些演示代码：

import React from 'react';
import { Button, View, Text } from 'react-native';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.searchFeatured = this.searchFeatured.bind(this);
        this.customSearch = this.customSearch.bind(this);
        this.state = {
            loading: false,
            featuredspeakers: [],
            latestuploads: [],
        };
    }

    searchFeatured = value => {
        // overwrite featuredspeakers and latestuploads! Downloaded data is lost
        this.setState({
            featuredspeakers: this.customSearch(this.state.featuredspeakers, value),
            latestuploads: this.customSearch(this.state.latestuploads, value),
        });
    };


    customSearch = (items, value) => {
        let searchTermLowercase = value.toLowerCase();
        let result = items.filter(item => {
            let featureLowercase = (item.name + " " + item.title).toLowerCase();
            return featureLowercase.indexOf(searchTermLowercase) > -1;
        });
        return result;
    }


    handlePress(obj) {
        let name = obj.name;
        this.searchFeatured(name);
    }

    handleReset() {
        this.setState({
            featuredspeakers: [{ name: 'Buffy', title: 'Slayer' }, { name: 'Spike', title: 'Vampire' }, { name: 'Angel', title: 'Vampire' }],
            latestuploads: [{ name: 'Sarah Michelle Gellar', 'title': 'Actress' }, { name: 'David Boreanaz', title: 'Actor' }],
            loading: !this.state.loading,
        });
    }

    componentDidMount() {
        this.handleReset();
    }

    getList(arr) {
        let output = [];
        if (arr) {
            arr.forEach((el, i) => {
                output.push(<Text>{el.name}</Text>);
            });
        }
        return output;
    }

    render() {
        let slayerList = this.getList(this.state.featuredspeakers);
        let actorList = this.getList(this.state.latestuploads);
        return (
        <View>
            <Button title="Search results for Slayer"
            onPress={this.handlePress.bind(this, {name: 'Slayer'})}></Button>
            <Button title="Search results for Actor"
            onPress={this.handlePress.bind(this, {name: 'Actor'})}></Button>
            <Button title="Reset"
            onPress={this.handleReset.bind(this)}></Button>
            <Text>Found Slayers?</Text>
            {slayerList}
            <Text>Found Actors?</Text>
            {actorList}
        </View>
        );
    }
};

export default App;