Javascript 显示json数组中的下一项

我有一个组件，它显示了json数组中的3个第一个图像。 我想添加一个按钮，它将用同一数组中的下3项替换前3项。 我想我错过了什么

import React，{Component}来自'React'；
导入“../App.css”；
从“/ImageList”导入ImageList；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
图像：[]，
索引：0
};
this.toNext=this.toNext.bind（this）；
}
componentDidMount（）{
取回（“https://picsum.photos/v2/list")
.then（res=>res.json（））
。然后（数据=>{
this.setState（{images:data}）；
})
.catch（错误=>{
log（'抓取过程中发生错误！'，err）；
});
}
toNext=（）=>{
this.setState（{index:（this.state.index+3）}）；
}
render（）{
返回(
图像列表
下一个
)
}
}

---

索引正在正确更新，但您没有考虑更新后的值。这可以通过在渲染方法中切片图像集合来实现：

render() {
    const minIndex = this.state.index;
    const maxIndex = minIndex + 3;
    return (
        <div className="container">
            <h2 className="title">Images list</h2>
            <ImageList data={this.state.images.slice(minIndex, maxIndex)}/>
            <button onClick={this.toNext} className="next-btn">Next</button>
        </div>
    )
}

render（）{
const minIndex=this.state.index；
常量最大索引=最小索引+3；
返回(
图像列表
下一个
)
}

可能缺少imagelist组件。我建议您使用slice来切换子列表。您似乎只更新了

索引

，但从未使用过它。要快速修复，请尝试将

更改为

，但您需要处理索引大于数组长度时发生的情况，您还可以将活动图像放入状态变量中，以避免在每次渲染时重新切片。此外，您不需要绑定

。绑定
toNext
方法，因为它是一个箭头函数，已经绑定到此
this
。谢谢@GabrielePetrioli