我建了一个网站，但当我按了 3 次“加载更多”按钮后，出现了问题。它给出了一个错误“TypeError：无法读取未定义的属性（读取‘id’）”...我猜切片和映射函数出了问题！ P.S. 我试图将“id”调用到其他组件，但没有成功！

class PostsList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      visible: 3,
      error: false
    };

    this.loadMore = this.loadMore.bind(this);
  }

  loadMore() {
    this.setState((prev) => {
      return {visible: prev.visible + 3};
    });
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts").then(
      res => res.json()
    ).then(res => {
      this.setState({
        posts: res
      });
    }).catch(error => {
      console.error(error);
      this.setState({
        error: true
      });
    });
  }

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.section}>
        <h2 className={classes.title}>Latest news</h2>
        <div>
          <GridContainer>
            {
              this.state.posts.slice(0, this.state.visible).map((post, i) => {
               return (
                  <PostCard key={i}
                  id={posts[i].id}
                  date={posts[i].date} 
                  fbimg={posts[i].fbimg} 
                  description={posts[i].description} 
                  fbpost={posts[i].fbpost}
                  />
                );
              })
            } 
          </GridContainer> 
           <GridContainer>
            <GridItem>
            {this.state.visible < this.state.posts.length &&
              <Button 
                color="info"
                onClick={this.loadMore} 
              >
              Load more
              </Button>
            }
            </GridItem>
          </GridContainer>
      </div>
    </div>
    );
  }
}

提前谢谢您！！！