Как отфильтровать данные из нескольких состояний, получая данные из отдельных API-интерфейсов в реагировать родной

Question

У меня было два состояния с именами latestuploads и featuredspeakers, и я получаю данные в обоих из отдельных API, используя Ax ios. Теперь я хочу, чтобы при поиске данных из featuredapeakers он только отфильтровывал состояние featuredspeakers и аналогично latestuploads. Но я не знаю, хочу, я делаю неправильно. Пожалуйста, посмотрите на мой код и помогите мне. спасибо

class SearchPage extends Component {
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.setState({
      featuredspeakers: responseArr[0].data,
      latestuploads: responseArr[1].data,

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


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

и я вызываю свою функцию searchFeatured здесь

<View style={styles.inputContainer}>
  <TextInput
    onChangeText={value => this.searchFeatured(value)}
    placeholder="SEARCH..."
    underlineColorAndroid="transparent"
    style={styles.textInput}
  />
</View>;

Answer 1

Для поиска по обоим массивам объедините массивы в один массив. Я не вижу необходимости делать следующее, оба массива будут иметь одинаковые значения. Для работы saerch вам понадобятся два массива: один для данных из API и один для отображения данных, которые будут использоваться для фильтрации.

this.setState({
  featuredspeakers: filterFeatured,
  latestuploads: filterFeatured,
});

Ваше состояние будет выглядеть следующим образом

state = {
    latestuploadsApiData: [],
    featuredspeakersApiData: [],
    latestuploads: [],
    featuredspeakers: []
}

Затем в вашем вызове axe ios присвойте массивам одинаковые значения

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.setState({
        featuredspeakers: responseArr[0].data,
        latestuploads: responseArr[1].data,
        latestuploadsApiData: responseArr[1].data,
        featuredspeakersApiData: responseArr[0].data,
        loading: !this.state.loading
      });
    });

}

В вашей функции поиска объедините массив и фильтр

searchFeatured = value => {
  const filterFeatured = [
    ...this.state.latestuploadsApiData,
    ...this.state.featuredspeakersApiData
  ].filter(item => {
    const searchString = `${item.name} ${item.title}`;

    return (
      searchString && searchString.toLowerCase().includes(value.toLowerCase())
    );
  });

  // both arrays will have the same data
  this.setState({
    featuredspeakers: filterFeatured,
    latestuploads: filterFeatured
  });
};

ДЕМО

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value: '',
      name: 'React',
      latestuploadsApiData: [
        { title: 'React todo list', name: 'Cyril' },
        {
          title: 'Avoid Object Mutation for Better Performance',
          name: 'Michael'
        }
      ],
      featuredspeakersApiData: [
        { title: 'State of React', name: 'Junius' },
        { title: 'Javascript for Native', name: 'Peter' }
      ],
      latestuploads: [
        { title: 'React todo list', name: 'Cyril' },
        {
          title: 'Avoid Object Mutation for Better Performance',
          name: 'Michael'
        }
      ],
      featuredspeakers: [
        { title: 'State of React', name: 'Junius' },
        { title: 'Javascript for Native', name: 'Peter' }
      ]
    };
  }

  searchFeatured = value => {
    const filterFeatured = [
      ...this.state.latestuploadsApiData,
      ...this.state.featuredspeakersApiData
    ].filter(item => {
      const searchString = `${item.name} ${item.title}`;

      return (
        searchString && searchString.toLowerCase().includes(value.toLowerCase())
      );
    });

    this.setState({
      featuredspeakers: filterFeatured,
      latestuploads: filterFeatured
    });
  };

  render() {
    return (
      <div>
        <p>Start editing to see some magic happen :)</p>

        <input
          value={this.state.value}
          onChange={e => {
            this.setState(
              {
                value: e.target.value
              },
              () => {
                this.searchFeatured(this.state.value);
              }
            );
          }}
          type='text'
        />

        <p>
          Featured speakers, will combine data from latestuploads once you start
          typing.
        </p>

        {this.state.featuredspeakers.map(item => (
          <p>{`${item.name} - ${item.title}`}</p>
        ))}

        <hr />

        <p>
          Latest uploads, will combine data from featuredspeakers once you start
          typing.
        </p>

        {this.state.latestuploads.map(item => (
          <p>{`${item.name} - ${item.title}`}</p>
        ))}
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>