我需要添加一个切片数组，我从api得到如何做到这一点

Question

所以我无法添加到显示我能够从我的阵列中减去我知道我必须以某种方式使用长度但我不确定这是我能够到目前为止得到的。

  this.state = {
    posts: [],
    toCondosPage: false,
    Packs: []

  };
  }

  componentDidMount() {
    axios
      .get(
        `http://{Myapi}/`    
      )
      .then(res => {
        const posts = res.data.response.slice(0,3);
        this.setState({ posts });
        console.log(posts);



      });
  }

  handleAdd = () => this.setState({ posts: this.state.slice(0, this.state.posts.length + 1) })

  handleRemove = () => this.setState({ posts: this.state.posts.slice(0, -1) })
  render() {


const { posts } = this.state
    return (
<Container>
         <Header as='h1'>Featured Packages</Header>
       <Divider hidden/>
      <Grid centered>  


<Transition.Group>
        {this.state.posts.map(post => (
          <div  key={post.pack_id}>

<Grid.Column  mobile={16} tablet={12} computer={8}>

             <Card.Group size='medium' Align='center'  >
             <Popup trigger={<Card  color="teal" >
             <Link to={"/posts/" + post.pack_permalink }>

              <Image 
              src= {`(API goes HERE )${post.pack_photo}`} rounded
              label={{
                as: "a",
                color: "red",
                content: "Packages",
                ribbon: true,
                icon: "concierge-bell"
              }}
              />
              </Link>
                <Card.Content color='teal' textAlign='center' >
                <Card.Meta>
                  <Icon color='teal' name='hotel'/>
                  <Icon color='teal' name='calendar alternate'/>
                  <Icon color='teal' name='ticket alternate'/>
                  <Icon color='teal' name='map'/>
                  <Icon color='teal' name='camera retro'/>
                  </Card.Meta>

               <Card.Header>{post.pack_name}</Card.Header> 
                <Card.Description>{post.pack_short_description}</Card.Description>
                <br/>

                <Link to={"/posts/" + post.pack_permalink }><Button color='red'>More Info </Button></Link>
                <br/><br/>
                </Card.Content>
                </Card>} content="Click on me for more Info" inverted/>
              </Card.Group>






<Divider hidden/>

              </Grid.Column>

            </div>

        ))}
  </Transition.Group>

        </Grid>
        <Header as='p'>Show more</Header>
        <Button.Group>
          <Button color='red'disabled={posts.length === 0} icon='minus' onClick={this.handleRemove} />
          <Button color='green' disabled={posts.length === 0} icon='plus' onClick={this.handleAdd} />
        </Button.Group>

        </Container>

here is a list of the array I'm trying to use like I said I'm able to minus or show one less every time I click the minus button but as I click the button to add I error out.

{
"code": 200,
"status": "OK",
"error": false,
"response": [
{
"pack_id": 1,
"pack_permalink": "allinclusive-fall-getaways",
"pack_name": "All-Inclusive Fall Getaways",
"pack_short_description": "South Padre Island vacation package including food, drinks, a dolphin watch for each person, and hotel room (up to 4 people per hotel room).",
"pack_category": "0",
"pack_feature": 0,
"pack_from": "2019-09-01T00:00:00.000Z",
"pack_to": "2019-12-31T00:00:00.000Z",
"pack_photo": "25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg",
"pack_gallery": [
"25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg",
"25f39a81-459b-11e9-ba7a-81151779d1a9-2.jpg",
"25f39a82-459b-11e9-ba7a-81151779d1a9-3.jpg",
"25f39a83-459b-11e9-ba7a-81151779d1a9-4.jpg"
],
"hotels": [
{
"id": "1",
"name": "La Copa Inn Beach Hotel",
"permalink": "la-copa-inn-beach-hotel",
"photo": "25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg"
},
{
"id": "2",
"name": "La Quinta Inn & Suites",
"permalink": "la-quinta-inn-suites",
"photo": "25f39a81-459b-11e9-ba7a-81151779d1a9-2.jpg"
},
{
"id": "3",
"name": "Hilton Garden Inn",
"permalink": "hilton-garden-inn",
"photo": "25f39a82-459b-11e9-ba7a-81151779d1a9-3.jpg"
}
],
"addOns": [
{
"name": "All-Inclusive Food",
"type": "25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg"
},
{
"name": "All-Inclusive Drinks",
"type": "25f39a81-459b-11e9-ba7a-81151779d1a9-2.jpg"
},
{
"name": "Dolphin Watch Ticket sumer",
"type": "25f39a82-459b-11e9-ba7a-81151779d1a9-3.jpg"
}
]
},

Answer 1

我不确定你要做什么，但是你在handleAdd = () => this.setState({ posts: this.state.posts.slice(0, this.state.posts.length + 1) })错过了this.state.posts