javascript - 使用循环从带有拼接的数组中选择项目

Question

我正在使用 pixabay 数组。我确实设法从数组中获取数据，但数据包含 20 张随机图片。我只想在我的网站上看到 3 张图片。

我使用了切片数组。可悲的是，这对我不起作用，我想我做错了什么。 --> Remove items from array with splice in for loop也许我应该使用 if 函数？

这是我的代码:

{apiImages.map( img => (
                    <Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
                    <a href="/alleblogs">
                    <CardTitle style={{color: '#fff', height: '176px', background: 'url( {  } ) center / cover' }}>Golden Bridge</CardTitle>
                    <CardText>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis distinctio esse qui eos, ad provident,
                    </CardText>
                    <CardActions border>
                    <Button style={{color: '#8dd5e8'}}>Likes:</Button>
                    <Button style={{color: '#8dd5e8'}}>Share</Button>
                    </CardActions>
                    </a></Card>
                ))} 

正如你所看到的，我使用了一个循环。这个循环只显示 20 张卡片(无图片)，但我的问题是我只想显示 3 张卡片。

{apiImages.splice(6).map( img =>  ---> This doesn't work either. 

我不知道，但也许这段代码也会有用(这是我获取 api 的地方):

componentDidMount() {
        fetch("https://pixabay.com/api/?key=11095386-871fd43c33a92700d9bffb82d&q=travel&image_type=photo&pretty=true")
          .then(res => res.json())
          .then(
            (result) => {
              console.log(result)
              this.setState({
                apiImg: result.hits
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }   

Answer 1

您可以使用Array.slice直接对数组进行切片。

var a = [1,2,3,4,5,6,7,22,34,43,56]

a.slice(0, 3).map((v) => { console.log('Element:', v) })

{apiImages.slice(0, 3).map( img =>  ---> This will work.