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 项数据添加到列表中

Answer 1

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

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

Answer 2

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'
      }
    ]
  }
]
//map someObject into its item.data;
const lists = someObject.map(item=>item.data);
//im going to assume you start with the first five items being displayed
let index = 0;
let displayedOnScreen = lists[index];
let interval;

myClick();
//simulates click
function myClick(){
    index++;
    displayedOnScreen = displayedOnScreen.concat(lists[index]);
    console.log(displayedOnScreen);
  }
//if you want to display all items
   // console.log(lists.flat())

循环遍历嵌套的对象数组和限制值

2 个答案: