如何根據數組的內容有條件地渲染 React Native FlatList？

Question

我的應用程序中有一個數組completedTests ，其內容的一個示例是這樣的（當我使用console.log()時）：

Array [
  Object {
    "difference": 140,
    "id": "Practice Test 3",
    "targetReached": false,
    "testScore": "1400",
  }
]

要顯示其內容，我將使用：

<View>
<FlatList
    data={completedTests}
    keyExtractor={item => item.id}
    renderItem={({ item }) => (
           <View style={[styles.scoreOverview, { backgroundColor: '#596b96' }]}>
                <Text>{item.id}</Text>
                <Text>{item.testScore}</Text>
                <Text>{item.targetReached.toString()}</Text>
                <Text>{item.difference}</Text>
           </View>
         )} />
</View>

如果數組為空，我會將數組設置為["none"] ，並嘗試顯示它會導致以下錯誤：

undefined 不是 object（評估“item.targetReached.toString”）

如何以我想要的方式有條件地呈現我的FlatList ？

Answer 1

不要將您的數組設置為“無”，而是使用這種方法

<FlatList
    data={completedTests}
    keyExtractor={item => item.id}
    ListEmptyComponent={<Text>None</Text>}
    renderItem={({ item }) => (
           <View style={[styles.scoreOverview, { backgroundColor: '#596b96' }]}>
                <Text>{item.id}</Text>
                <Text>{item.testScore}</Text>
                <Text>{item.targetReached.toString()}</Text>
                <Text>{item.difference}</Text>
           </View>
         )} />

當您提供的數組為空時， ListEmptyComponent將呈現

Answer 2

我認為這可能適用於你在那里嘗試做的事情......

       <View>
        {
        completedTests[0] !== "none" ? (<FlatList
            data={completedTests}
            keyExtractor={item => item.id}
            renderItem={({ item }) => (
                   <View style={[styles.scoreOverview, { backgroundColor: '#596b96' }]}>
                        <Text>{item.id}</Text>
                        <Text>{item.testScore}</Text>
                        <Text>{item.targetReached.toString()}</Text>
                        <Text>{item.difference}</Text>
                   </View>
                 )} />) : (
<Text>None</Text>
    )
        }
        </View>

所以你檢查數組內容，如果它不是["none"]那么你可以渲染 flatList 其他東西或什么都沒有。