如何显示像一副纸牌一样允许用户单击下一张/上一张图片的图片？

Question

到目前为止，我可以像这样显示用户成功上传到浏览器的图像。

if (redirectToStackAfterPhotoSubmit) {
    return (
        <Stack
            imagesOnStack={this.state.url || 'http://via.placeholder.com/400x300'}
            alt="Uploaded Images"
            height="300"
            Width="400"
        />
    );
}

但是这次，我希望用户能够通过单击按钮浏览下一张或上一张图片。我知道我的尝试是尝试列出一个清单，我只是这样做是为了了解我正在使用的东西。

下面是我的尝试。我觉得自己的map()可能会有点落后。我在做什么错了，我该如何解决？

如果您需要更多信息/代码，请告诉我

这里是Upload.js（因为文件很大，所以没有发布所有内容）

this.state = {
       url: '',
       picture: [],
       selectedPictureIndex: 0
    };

 render() {
    const redirectToStackAfterPhotoSubmit = this.state.redirectToStackAfterPhotoSubmit;

    const { picture } = this.state;

    const picList = picture.map(pic => {
        return(
            <li key={pic.id}>{this.state.url[pic]}</li>
        );
    });

    if (redirectToStackAfterPhotoSubmit) {
        return (
            <Stack
                imagesOnStack={picList || 'http://via.placeholder.com/400x300'}
                alt="Uploaded Images"
                height="300"
                Width="400"
            />
        );
    }
}