Question

我使用的是方阵。我确实设法从数组中获取数据，但是数据包含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.

http://i66.tinypic.com/w1pgck.png[/IMG]

我不知道，但是也许这段代码也很有用（这是我获取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.

Answer 2

我建议使用slice方法，该方法不会修改您的初始数组apiImages：

// create a const that store first 3 images
const firstThreeImages = apiImages.slice(0, 3);
// render them
{firstThreeImages.map(img => //rendering )}

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

2 个答案: