javascript - 遍历嵌套的对象数组和限制值

Question

我需要遍历数组的解决方案，一次只能获得 5 个项目，单击一个函数会显示另外 20 个项目。我需要遍历数组一次仅显示 5 个项目，然后单击将另外 5 个项目添加到现有数组并显示它。有什么方法可以完成吗？

假设一个对象

let someObject = [
  {
    data: [
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      }
    ]
  },
  {
    data: [
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      }
    ]
  },
  {
    data: [
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      },
      {
        id: 123,
        name: 'anything'
      }
    ]
  }
]

这里我渲染名字

const Item = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.avatarText}>{item.name}</Text>
    </View>
)

我通过对象映射，因为它是嵌套的我需要添加 items.data

someObject.map((items,indexes) => (
    <View key={indexes.toString()}>
      <FlatList 
        data={items.data}
        renderItem={Item}
      />
    </View>
))

现在就像我需要一次只显示 5 项数据，然后单击将另外 5 项数据添加到列表中

标签： javascriptreactjsreact-nativenext.js

Answer 1

您可以为当前索引创建一个变量并在单击时增加它。例如：

const currentIndex = 0;
showButton.addEventListener('click', () => {
  displayItems(someObject[currentIndex]); // your function for displaying items
  if (currentIndex !== someObject.length) {
   currentIndex++;
  }
})