如何从多个状态中过滤数据以React Native的方式从单独的API获取数据

艾哈迈德·萨尔曼(Ahmed Salman)

我已经命名了两个状态latestuploadsfeaturedspeakers并且正在使用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>;
六月

要搜索两个阵列,请将阵列合并为一个阵列。我看不到需要执行以下操作,两个数组将具有相同的值。为了使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
  });
};

演示

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React-如何获取更新的数据以显示在表中?

来自分类Dev

react中如何获取状态的初始数据

来自分类Dev

如何模拟状态中的数据以测试从状态中删除的 Redux 减速器?

来自分类Dev

如何在 React 中过滤 api 数据

来自分类Dev

从Firestore文档列表中获取数据以陈述状态

来自分类Dev

如何在React中按状态数组过滤数据对象?

来自分类Dev

R-如何使用参数列表过滤数据以生成多个数据框和图形

来自分类Dev

如何在 React Native 中从 API 端点获取完整数据后显示数据?

来自分类Dev

如何在单个API路径中过滤多个数据?

来自分类Dev

过滤数据以从javafx中的数据库显示

来自分类Dev

如何过滤CDS(powerapps)中的数据以限制未经授权的用户

来自分类Dev

如何在React中显示状态数据?

来自分类Dev

React发送子输入数据以更新父状态

来自分类Dev

如何在React Actions Redux中获取状态数据?

来自分类Dev

如何从Facebook API返回的jsonp中获取数据以获取封面图像

来自分类Dev

如何在React Native EXPO中的Dropdown选项中动态获取api数据

来自分类Dev

如何计算R中每人的多个观察数据以计算OLS和分位数回归?

来自分类Dev

如何以“ react-native”方式获取图片的所有像素的数据

来自分类Dev

按特定ID过滤数据以在ReactJS中显示

来自分类Dev

如何从 API 获取用户数据以在 React 应用程序中使用?

来自分类Dev

API成功获取数据后如何在React Native中调用渲染

来自分类Dev

如何遍历API密钥以在最终数据帧的单独行中获取它们的输出?

来自分类Dev

将CSV数据过滤到多个单独的文件中

来自分类Dev

如何在状态中存储多个反应表单数据

来自分类Dev

正确的数据获取方式-React

来自分类Dev

如何从以前获取的数据更新React状态?

来自分类Dev

当数据以扇出方式位于多个路径中时,如何在Firebase数据库中进行一致删除?

来自分类Dev

如何从eBay api获取Json数据以CSV格式保存?

来自分类Dev

如何从eBay api获取Json数据以CSV格式保存?

Related 相关文章

  1. 1

    React-如何获取更新的数据以显示在表中?

  2. 2

    react中如何获取状态的初始数据

  3. 3

    如何模拟状态中的数据以测试从状态中删除的 Redux 减速器?

  4. 4

    如何在 React 中过滤 api 数据

  5. 5

    从Firestore文档列表中获取数据以陈述状态

  6. 6

    如何在React中按状态数组过滤数据对象?

  7. 7

    R-如何使用参数列表过滤数据以生成多个数据框和图形

  8. 8

    如何在 React Native 中从 API 端点获取完整数据后显示数据?

  9. 9

    如何在单个API路径中过滤多个数据?

  10. 10

    过滤数据以从javafx中的数据库显示

  11. 11

    如何过滤CDS(powerapps)中的数据以限制未经授权的用户

  12. 12

    如何在React中显示状态数据?

  13. 13

    React发送子输入数据以更新父状态

  14. 14

    如何在React Actions Redux中获取状态数据?

  15. 15

    如何从Facebook API返回的jsonp中获取数据以获取封面图像

  16. 16

    如何在React Native EXPO中的Dropdown选项中动态获取api数据

  17. 17

    如何计算R中每人的多个观察数据以计算OLS和分位数回归?

  18. 18

    如何以“ react-native”方式获取图片的所有像素的数据

  19. 19

    按特定ID过滤数据以在ReactJS中显示

  20. 20

    如何从 API 获取用户数据以在 React 应用程序中使用?

  21. 21

    API成功获取数据后如何在React Native中调用渲染

  22. 22

    如何遍历API密钥以在最终数据帧的单独行中获取它们的输出?

  23. 23

    将CSV数据过滤到多个单独的文件中

  24. 24

    如何在状态中存储多个反应表单数据

  25. 25

    正确的数据获取方式-React

  26. 26

    如何从以前获取的数据更新React状态?

  27. 27

    当数据以扇出方式位于多个路径中时,如何在Firebase数据库中进行一致删除?

  28. 28

    如何从eBay api获取Json数据以CSV格式保存?

  29. 29

    如何从eBay api获取Json数据以CSV格式保存?

热门标签

归档