Как я могу заставить функцию изменить индекс массива?

Question

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

, когда я нажимаю предыдущий или следующий, я хочу, чтобы слайдер изменился на массив с правильным индексом, но ничего не происходит. Я вижу, что индекс изменяется, но я не понимаю, почему он не меняется на новый массив. теперь он всегда в массиве с индексом 0.

Что я пробовал:

• Удаление индекса массива из sortIntoArray и использование его непосредственно в функции карты. И как число, и как строка.

от этого:

setImages(currenState => ({ ...currenState,
  posters: result[0]
}));

let poster = posters.map((item, index) => (<img src={item} alt="poster" style={style.poster}
key={index}/>));

к этому

setImages(currenState => ({...currenState, 
  posters: result
}));

let poster = posters[1].map((item, index) => (<img src={item} alt="poster" style={style.poster} key={index} />   ));

, а также

let poster = posters["1"].map((item, index) => (<img src={item} alt="poster" style={style.poster} key={index} />));

Но если я сделаю это, я получу эта ошибка: TypeError: Невозможно прочитать свойство 'map' из неопределенного. Это работало до того, как я изменил компонент с компонента класса на использование ловушек.

• Я попытался добавить аргументы в sortIntoArray и вызвать его напрямую из nextSlide и prevSlide.

I создал песочницу здесь: https://codesandbox.io/s/ancient-firefly-wzxi0?file= / src / Slider. js

Answer 1

Итак, во-первых, вам нужно обновить свой эффект использования, чтобы иметь зависимость от вашего состояния вместо пустого массива, иначе он будет выполнять вашу функцию только один раз, что означает, что вы только когда-либо вызываете sortIntoArray с начальным состоянием. Поэтому попробуйте что-то вроде

useEffect(() => {
    sortIntoArray();
  }, [images.idx]);

. Это означает, что каждый раз, когда изменяется состояние images.idx, он снова вызывает ваш эффект.

Во-вторых, в вашей функции sortIntoArray я нашел ошибка, из-за которой posters была бы строкой, а не массивом, что приводило к ошибке map of undefined.

Я не мог понять, почему вы пытались сгруппировать массив в секции по 3 и затем установите плакаты, чтобы быть правильным элементом из этого массива. Поэтому я обновил вашу sortIntoArray функцию так, чтобы она выглядела как

const sortIntoArray = () => {
    let posterImages = [...images.items];

    let size = 3;

    let posters = posterImages.slice(
      images.idx * size,
      (1 + images.idx) * size
    );

    setImages(currenState => ({
      ...currenState,
      posters
    }));
  };

Разница здесь в том, что мы просто берем правый подраздел с помощью среза и устанавливаем плакаты равными этому.

Мне также пришлось обновить вашу следующую функцию до следующей, основываясь на предыдущих изменениях

const nextSlide = () => {
    let current = images.idx;
    let next = current + 1;

    let posterLength = Math.ceil(images.items.length / size) - 1;

    if (next > posterLength) {
      next = posterLength;
    }

    setImages(currentState => {
      return {
        ...currentState,
        idx: next
      };
    });
  };

С той разницей, что мы просто определяем длину плаката, основываясь на уменьшении общего количества элементов по размеру.

Вы можете увидеть все это здесь: https://codesandbox.io/s/red-snow-1cs0e?file= / src / Slider. js Это то, что вы ищете?