Javascript 如何在react native中一次在多个状态下使用filter函数

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

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

如果不为null/false，则使用| |（OR）语句将取第一个值，如果为第二个值，则取第二个值。您应该做的是组合阵列

你应该试试这样的东西

[...this.state.latestuploads, ... this.state.featuredspeakers].filter(item=>{});

---

然后，您应该分别在列表上应用过滤器。下面的示例代码=>

const searchFeatured = value => {
    this.setState({
        featuredspeakers: customSearch(this.state.featuredspeakers, value),
        latestuploads: customSearch(this.state.latestuploads, value)
    });
};


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

---

艾哈迈德，我根本无法让你的代码工作-

searchFeatured

在任何地方都不会被调用。但我有一些想法，希望能有所帮助

我看到您正在

componentDidMount

中设置

featuredspeakers

和

latestuploads

。这些是包含大量数据的大型阵列

但是，在

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;

从“React”导入React；
从“react native”导入{按钮、视图、文本}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.searchFeatured=this.searchFeatured.bind（this）；
this.customSearch=this.customSearch.bind（this）；
此.state={
加载：false，
功能扬声器：[]，
延迟加载：[]，
};
}
searchFeatured=value=>{
//覆盖功能扬声器和最新加载！下载的数据丢失
这是我的国家({
featuredspeakers:this.customSearch（this.state.featuredspeakers，值），
latestuploads:this.customSearch（this.state.latestuploads，值），
});
};
customSearch=（项目、值）=>{
让searchTermLowercase=value.toLowerCase（）；
让结果=项。过滤器（项=>{
让featureLowercase=（item.name+“”+item.title）.toLowerCase（）；
返回featureLowercase.indexOf（searchTermLowercase）>-1；
});
返回结果；
}
扶手（obj）{
让name=obj.name；
本文件（名称）；
}
handleReset（）{
这是我的国家({
特写演说家：[{名字：'Buffy'，头衔：'Slayer'}，{名字：'Spike'，头衔：'Vampire'}，{名字：'Angel'，头衔：'Vampire'}]，
最新消息：[{姓名：'Sarah Michelle Gellar'，'title'：'Actor'}，{姓名：'David Boreanaz'，title:'Actor'}]，
正在加载：！this.state.loading，
});
}
componentDidMount（）{
这个.handleReset（）；
}
获取列表（arr）{
让输出=[]；
如果（arr）{
arr.forEach（（el，i）=>{
push（{el.name}）；
});
}
返回输出；
}
render（）{
让slayerList=this.getList（this.state.featuredspeakers）；
让actorList=this.getList（this.state.latestuploads）；
返回(
找到杀手了吗？
{slayerList}
找到演员了吗？
{actorList}
);
}
};
导出默认应用程序；

我不明白您为什么要使用| |运算符。是否要合并阵列，然后执行筛选？。。例如，

[…this.state.latestuploads，…this.state.featuredspeakers]

哦，对不起，我说我不知道我在做什么，是的，我想这样做，不，兄弟，我通过这样做获得了多个数据。我有两个状态，两个状态都从seprate API获得seprate数据。现在我想从中过滤数据。我不想合并数组。。请看我的更新代码。谢谢，我发现customsearch未定义错误。我的searchFeatured函数是字段中的onChangeText，但是我到底在哪里调用这个customSearch函数呢？你必须声明变量，我更改了我的示例代码，它应该可以工作。如您所知，customSearch函数在setState中调用。。。我建议创建另一个函数使其干净…嗨，谢谢你的回复。searchFeatured在此被调用。searchFeatured（value）/>您应该更改您的searchFeatured方法以打印出处于组件状态的内容，以便查看发生了什么。我在我的示例中添加了一个TextInput，当我键入时，大多数FeaturedSpeaker和Latestupload数据都被删除了。这是因为代码重新分配了这些值。我想你可能不想这样做。所以只要把这段代码放在

searchFeatured

方法的顶部：

console.log（“searchFeatured:value”+value+”，state:“+JSON.stringify（this.state））。然后在Metro server中查看输出，同时键入
TextInput
。希望这能让我们对正在发生的事情有所了解。