Блог

Главная - Вопросы по программированию - Показать следующие элементы из массива json

Показать следующие элементы из массива json

#javascript #json #reactjs

#javascript #json #reactjs

Вопрос:

У меня есть компоненты, которые показывают 3 первых изображения из массива json. Я хочу добавить кнопку, которая заменит эти первые 3 элемента следующими 3 в том же массиве. Я думаю, я что-то здесь упускаю

 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>

Комментарии:

1. возможно, отсутствует компонент imagelist. Я предлагаю вам использовать slice для создания подсписка

2. Кажется, что вы только обновляете index , но никогда не используете его.

3. Для быстрого исправления попробуйте изменить <ImageList data={this.state.images}/> на <ImageList data={this.state.images.slice(this.state.index, this.state.index 3}/> , но вам нужно будет обработать, что происходит, когда индекс становится больше длины массива, и вы также можете поместить активные изображения в переменную состояния, чтобы избежать повторного нарезки при каждом рендеринге.

4. Кроме того, вам не нужен .bind этот toNext метод, поскольку это функция со стрелкой, которая уже привязана к этому this .

Ответ №1:

Индекс обновляется правильно, но вы не учитываете это обновленное значение. Это может быть достигнуто путем нарезки коллекции изображений в методе рендеринга:

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