显示 json 数组中的下一项

Question

I have a components, which shows 3 first images from json array. I want to add a button which will replace those first 3 items with next 3 in the same array. I guess I'm missing something here

 import React, {Component} from 'react'; import '../App.css'; import ImageList from "./ImageList"; class App extends Component { constructor() { super(); this.state = { images: [], index: 0 }; this.toNext = this.toNext.bind(this); } componentDidMount() { fetch("https://picsum.photos/v2/list") .then(res => res.json()) .then(data => { this.setState({ images: data }); }) .catch(err => { console.log('Error happened during fetching!', err); }); } toNext = () => { this.setState({index: (this.state.index + 3)}); } render() { return ( <div className="container"> <h2 className="title">Images list</h2> <ImageList data={this.state.images}/> <button onClick={this.toNext} className="next-btn">Next</button> </div> ) } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>

Answer 1

The index is being updated correctly, but you are not taking that updated value into account. This could be achieved by slicing the images collection in the render method:

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>
    )
}