Javascript 如何过滤来自多个状态的数据从react native中的单独API获取数据

我有两个状态，分别命名为

latestuploads

和

featuredspeakers

，我正在使用Axios从单独的API获取这两个状态的数据。现在我想，如果我从

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

this.searchFeatured（value）}
占位符=“搜索…”
underlineColorAndroid=“透明”
style={style.textInput}
/>
;

要在两个阵列上搜索，请将两个阵列合并为一个阵列。我不认为有必要执行以下操作，两个数组将具有相同的值。要使saerch正常工作，您需要两个数组，一个用于api中的数据，另一个用于显示数据，用于过滤

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

您的状态如下所示

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

然后在axios调用中为数组分配相同的值

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

演示

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
值：“”，
名称：'反应'，
晚沙棘：[
{标题：'React todo list'，名称：'Cyril'}，
{
标题：“避免对象突变以获得更好的性能”，
姓名：“迈克尔”
}
],
特性PeakerSapiData：[
{title:'stateofreact'，name:'Junius'}，
{title:'Javascript for Native'，name:'Peter'}
],
迟交的货物：[
{标题：'React todo list'，名称：'Cyril'}，
{
标题：“避免对象突变以获得更好的性能”，
姓名：“迈克尔”
}
],
功能扬声器：[
{title:'stateofreact'，name:'Junius'}，
{title:'Javascript for Native'，name:'Peter'}
]
};
}
searchFeatured=value=>{
常数过滤器特性=[
…这个州，这个州，
…this.state.featuredspeakersApiData
].filter（项目=>{
const searchString=`${item.name}${item.title}`；
返回(
searchString&&searchString.toLowerCase（）.includes（value.toLowerCase（））
);
});
这是我的国家({
功能扬声器：过滤器功能，
延迟加载：过滤器功能
});
};
render（）{
返回(
开始编辑以查看发生的奇迹：）

{
这是我的国家(
{
价值：即目标价值
},
() => {
this.searchFeatured（this.state.value）；
}
);
}}
type='text'
/>

特色扬声器，将在您启动后合并最新加载的数据
打字。

{this.state.featuredspeakers.map（项=>(
{`${item.name}-${item.title}`}

))}


最新的上传，将在您开始时合并来自featuredspeakers的数据
打字。

{this.state.latestuploads.map（项=>(
{`${item.name}-${item.title}`}

))}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

您正在两个数组上进行筛选是的，我想在一个函数上筛选两个数组，我在TextInput中调用了该函数。我想我做错了什么。所以如果你得到它，请告诉我。感谢过滤不起作用？过滤起作用了，但只在最新状态下加载数据，而不是在其他状态下如此接近，但我希望当我搜索说话人的某个名字时，它应该只针对featuredspeaker状态，latestuploads状态数据应该保持不变，对于latestuploads，我是针对latestuploads数组中的标题。