Question

使用React Native的FlatList接口时，在哪里插入逻辑以确定应该渲染哪些项目/应该如何渲染的最佳位置？

我的目标是在应用中按日期显示一些收入数据，并控制显示的逻辑。逻辑的第一步是确定收入数据是否未定义，如果是，则向用户显示视觉指示符，指出在特定日期没有可用的收入数据。

以下是最相关的代码段：

function Item({ date, income }) {
  if (income === undefined) {
    console.log("no income data!");
    return (
      <View>
        <Text>Sorry, no income data available!</Text>
      </View>
    );
  } else {
    return (
      <View>
        <Text>{date}</Text>
        <Text>Income was {income}</Text>
      </View>
    );
  }
}

Here is the output on the app, to demonstrate that the basic use of FlatList is working, but some of the logic is being skipped

如果需要，我将为上下文添加更多代码，但是暂时我只是想知道将逻辑放在我认为合适的位置，还是我无法正确地将逻辑连接到FlatList中。第一名。

Answer 1

所以，请用我的代码向您解释，希望能清除它。请找到同样的世博小吃：expo-snack

所以代码是

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

function Item({ title }) {

  return (
    <View style={styles.item}>
     {title != 'First Item'?<Text style={styles.title}>{title}</Text>:<Text>Im the first one</Text>} 
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

因此，基本上，平面列表是在Data数组中呈现标题。现在，我想确定如果title == 'First Item'那么请向Im显示第一个而不是标题。

所以，

{title != 'First Item'?<Text style={styles.title}>{title}</Text>:<Text>Im the first one</Text>}

是所使用的条件。您可以像处理JSX元素一样使用逻辑。

希望那很清楚。毫无疑问

Answer 2

这里有更多代码显示骨头移动

somecommand -h

使用FlatList渲染项目时在何处放置逻辑

2 个答案: