如何根据数组的内容有条件地渲染 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 is not an object (evaluating 'item.targetReached.toString`)

如何以我想要的方式有条件地渲染 FlatList？

Answer 1

不要将数组设置为“none”，而是使用这种方法

<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 其他东西或什么都不渲染。

如何根据数组的内容有条件地渲染 React Native FlatList？

How do you conditionally render a React Native FlatList depending on the contents of the array?

javascript

react-native

react-native-flatlist