Как использовать функцию фильтра в нескольких состояниях одновременно в реагировать родной

Question

Я хочу отфильтровать данные из нескольких моих состояний одновременно. Но я получаю данные только второго состояния. У меня есть два состояния, и оба состояния получают отдельные данные из seprate apis. Теперь я хочу отфильтровать данные из него. спасибо, я не знаю, что я делаю не так, пожалуйста, помогите мне и посмотрите на мой код.

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

Answer 1

Затем вы должны применить свой фильтр к спискам отдельно. Пример кода ниже =>

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

Answer 2

Ахмед, я не смог заставить ваш код работать вообще - 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;

Answer 3

Использование || (ИЛИ) оператор примет первое значение, если не ноль / ложь или второе. Что вы должны сделать, это объединить массивы

Вы должны попробовать что-то вроде

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