使用 Button 或 Touchableopacity 按类别反应原生过滤器

Question

如何在 react native 中根据单击按钮的状态来过滤记录？

这是我的数据：

[
   {
      "id":28,
      "Title":"Sweden",
      "Status":1
   },
   {
      "id":56,
      "Title":"USA",
      "Status":1
   },
   {
      "id":89,
      "Title":"England"
      "Status":1
   },
{
      "id":89,
      "Title":"England"
      "Status":2
   },
{
      "id":89,
      "Title":"England"
      "Status":2
   },
{
      "id":89,
      "Title":"England"
      "Status":3
   }
]

这里我有id、title、status..现在我需要根据status过滤这个

Answer 1

批评

虽然您的问题在编程能力方面非常具体，但在上下文方面却非常缺乏。 请记住，回答这些问题的人是在自己的时间里回答这些问题的，像您这样的问题有时真的很难加密。

您的问题中缺少关键要素：

• 应该在什么阶段进行过滤？
• 您是否已经尝试过一些不起作用的方法？
• 您是否已经有一个正在运行的 react-native 应用程序？还是从头开始？
• 使用 react-native，你使用钩子吗？或者正在扩展React.Component 类？
• 您遇到的问题甚至与 react-native 有关吗？还是只是 JavaScript？因为通过快速的谷歌搜索，你会在这里登陆：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

我可以继续，但最重要的是，帮助我们，帮助你，通过围绕你当前的情况画一幅画，它将帮助你更快、更好地得到答案。

我希望我不会阻止将来参与，但要明白，这类问题真的很难理解，你需要什么。

回答

现在，试着回答我认为你需要回答的问题。

就像@nithinpp 已经说过的，在JavaScript 中过滤数组可以使用Array.prototype.filter() 方法来完成，它的用法通常是这样的：

// Example taken from the https://developer.mozilla.org/ website
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

在 React/React-Native 领域内，必须在 react(-native) 组件内或在过滤所述数据并将其传递到的实用程序服务/reducers/saga 内使用此方法通过 props 的组件。

为了这个示例，我将使用 react-hooks，并在组件内部进行过滤，这样的解决方案可能如下所示：

使用 Expo Snack 的可播放在线版本：https://snack.expo.dev/yTte5nPud

//This is an example of online Emulator by https://aboutreact.com
import React, {useState, useMemo} from 'react';
import { Text, View, StyleSheet, Button, FlatList } from 'react-native';


// Item Component To render single items
function Item(props) {
  return (
    <View style={styles.item}>
      <Text>{props.item.id}: {props.item.Title} ({props.item.Status})</Text>
    </View>
  );
}

// Main App
const App = () => {
  // There are a lot of different ways to keep this info,
  // for the sake of this answer, I've put it in a useState hook
  const [fullList, setFullList] = useState([
    { "id":28, "Title":"Sweden", "Status":1 },
    { "id":56, "Title":"USA", "Status":1 },
    { "id":89, "Title":"England", "Status":1 },
    { "id":89, "Title":"England", "Status":2 },
    { "id":89, "Title":"England", "Status":2 },
    { "id":89, "Title":"England", "Status":3 } 
  ]);

  // Keep a statue of the current selected status
  const [status, setStatus] = useState('NONE')

  // the filtered list, cached with useMemo
  // the callback is call each time the status or the fullList changes
  const filteredList = useMemo(
    () => {
      if (status === 'NONE' ) return fullList
      return fullList.filter(item => status === item.Status)
    },
    [status, fullList]
  )

  // the onClick Method is a method that returns a method, which
  // updates the state based on the predefined status
  const onClick = (status) => () => {
      setStatus(status)
  }

  // render list using flat list, and the filter bar using standard buttons
  return (
    <View style={styles.container}>
      <Text>Selected Status: {status}</Text>
      <View style={styles.filterBar}>
        <Button title="Clear" onPress={onClick('NONE')} />
        <Button title="Status 1" onPress={onClick(1)} />
        <Button title="Status 2" onPress={onClick(2)} />
        <Button title="Status 3" onPress={onClick(3)} />
      </View>
      <FlatList
        style={styles.list}
        renderItem={Item}
        keyExtractor={(item) => item.id}
        data={filteredList}
      />
    </View>
  );
};

export default App;

// some basic styling
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
    backgroundColor: 'white',
  },
  list: {
    height: '100%',
    width: '100%'
  },
  filterBar: {
      flexDirection: 'row',
      // flex: 0.2,
      height: 40,
  },
  item: {
    flex: 1,
    justifyContent: 'flex-start',
    padding: 8,
    backgroundColor: 'white',
  }
});

总结

现在这个答案假设了很多事情，我仍然不知道您对 react-native 的了解程度，或者您是否知道如何使用诸如 FlatList 之类的 react-native 组件，这个答案不应该也开始解释这些，因此最终可能会让你感到困惑，并给你一个你甚至没有问过的问题的答案，我希望不是这样。

无论如何，我希望这会有所帮助，也许在您的下一个问题中记住这些要点

Answer 2

您可以使用Array Filter 根据您的情况过滤数据。

例如，

function filterArray(array, status){
  return array.filter(item => item.Status === status);
}

const DATA =  [ { "id":28, "Title":"Sweden", "Status":1 }, { "id":56, "Title":"USA", "Status":1 }, { "id":89, "Title":"England", "Status":1 }, { "id":89, "Title":"England", "Status":2 }, { "id":89, "Title":"England", "Status":2 }, { "id":89, "Title":"England", "Status":3 } ];

function filterArray(array,status){
  return array.filter(item => item.Status === status);
}

const statusOneArray = filterArray(DATA, 1);
console.log(statusOneArray);