如何让平面列表只呈现一次？

Posted 2023-03-13

【中文标题】如何让平面列表只呈现一次？

【英文标题】：how to have flat list render only once?

【发布时间】：2021-09-09 15:40:26

【问题描述】：

我试图只打印一次 ComponentTwo Flatlist，但我得到的结果是 image1，但相反，我需要它看起来像这样 image 2。我附上了一个小吃链接，里面有代码。

产生与图像相同结果的代码 Expo Snack Link

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example。您必须将代码添加到问题中 - 而不是图像。

【参考方案1】：

工作示例：Expo Snack

这是解决此问题的方法，首先将 index 值从 App.js 传递给 ComponentOne

const App = () => 
 return (
      <SafeAreaView style=styles.container>
        <FlatList
            data=DATA
            renderItem=(item, index) => <ComponentOne name=item.title index=index/>
            keyExtractor=(item) => item.id
        />
      </SafeAreaView>
  );
;

现在使用该道具值在ComponentOne 中有条件地渲染ComponentTwo，如下所示：

//...const 

ComponentOne = (props: ComponentOneProps) => 
  return (
    <View style= margin: 15, backgroundColor: 'yellow' >
      <FlatList
        data=recent
        renderItem=( item ) => 
          console.log("hello")
          // @ts-ignore
          return props.index == 0?<ComponentTwo name=item.name />:null;
        
        keyExtractor=(item) => item.idd
      />
//...