如何从 API 中过滤特定数据并显示在 React Native Flatlist 中？

Question

我正在制作一个 React 本机应用程序，以使用 API 显示所有实时和即将到来的编码竞赛。 API 结果是这样的 -

Object {
  "duration": "1209300.0",
  "end_time": "2022-06-12T18:25:00.000Z",
  "in_24_hours": "No",
  "name": "HackForGood: Grab Hackathon 2022",
  "site": "HackerEarth",
  "start_time": "2022-05-29T18:30:00.000Z",
  "status": "CODING",
  "url": "https://grabhackforgood.hackerearth.com/",
}
Object {
  "duration": "1641540.0",
  "end_time": "2022-06-19T15:59:00.000Z",
  "in_24_hours": "No",
  "name": "Microsoft Virtual Hackathon 2022",
  "site": "HackerEarth",
  "start_time": "2022-05-31T16:00:00.000Z",
  "status": "CODING",
  "url": "https://www.hackerearth.com/challenges/hackathon/microsoft-virtual-hackathon-2022/",
}
Object {
  "duration": "7200.0",
  "end_time": "2022-06-01T13:00:00.000Z",
  "in_24_hours": "Yes",
  "name": "TCO22 Algorithm Round 2B",
  "site": "TopCoder",
  "start_time": "2022-06-01T11:00:00.000Z",
  "status": "BEFORE",
  "url": "https://www.topcoder.com/challenges",
}
Object {
  "duration": "10800",
  "end_time": "2022-06-01 17:30:00 UTC",
  "in_24_hours": "Yes",
  "name": "CodeChef Starters 41",
  "site": "CodeChef",
  "start_time": "2022-06-01 14:30:00 UTC",
  "status": "BEFORE",
  "url": "https://www.codechef.com/START41",
}

我只想在平面列表中显示 status 值为“CODING”的那些比赛的详细信息。

App.js（ContestItem 只是一个显示每场比赛详细信息的项目组件）

export default function App() {

    const [loading, setLoading] = useState(true)
    const [originalData, setOriginalData] = useState([])

    const fetchAllContests = async () => {
        try {
            const response = await fetch(`https://kontests.net/api/v1/all`)
            const json = await response.json()
            setOriginalData([...originalData, ...json])
        } catch (e) {
            console.log(e)
            setError(e)
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        fetchAllContests()
    }, [])

    return (
        ~~~~~~~~~~~~~~~~~~~~~~~~~~
            <View style={styles.innerContainer}>
                {loading ? <ActivityIndicator size="large" color={Colors.RED}/> : (
                    <FlatList
                        style={styles.flatList}
                        data={originalData}
                        keyExtractor={({id}) => keyGenerator()}
                        renderItem={({item}) => (
                            <ContestItem
                                item={item}
                            />
                        )}
                    />
                )}
            </View>
        </View>
    )
}

如何实现？

Answer 1

您可以在 status === "CODING" 上 filter originalData。

<FlatList
   style={styles.flatList}
   data={originalData.filter(contest => contest.status === "CODING")}

假设，API结果是一个对象数组。

如何从 API 中过滤特定数据并显示在 React Native Flatlist 中？

How to filter specific data from API and display it in React Native Flatlist?

javascript

reactjs

react-native

react-native-flatlist