0

Имеется массив из нескольких компонентов, выводимых на экран.

Я сделал две функции, которые меняют индекс (+ и -), и функцию что возвращает элемент массива, согласно индексу.

Однако при нажатии, компонент не выводится на экран, и пропадает первый компонент, выводившийся по дефолту. Меж тем, console.log выводиться: $$typeof: Symbol(react.element).

const pages = [<Comp/>, <Comp2 />, <Comp3 />];

let index = 0;

const [page, setPage] = useState(pages[0]);

const rightHandler = () => {
  if (index >= pages.length - 1) return;
  index++;
  showPosition();
};

const leftHandler = () => {
  if (index <= 0) return;
  index--;
  showPosition();
};

function showPosition() {
  return pages[index];
}

Подскажите пожалуйста, в чём я ошибся?

1 ответ 1

0

Вы вызываете функцию showPosition, которая возвращает какое то значение, однако вы не сохраняете возвращенный результат и никак его не обрабатываете.

Вам необходимо в функции, которая предназначена для смены компонента, не возвращать значение, сохранять его в состоянии компонента в переменную page.

function showPosition() {
    setPage(pages[index]);
}

В таком случае, React поймет, что состояние компонента было изменено и требуется его перерисовать.

З.Ы.: Да и переменную index лучше в стейт положить, а изменение index отслеживать через useEffect и там уже менять page

const [page, setPage] = useState(pages[0]);
const [index, setIdx] = useState(0);

const rightHandler = () => {
    if (index >= pages.length - 1) return;
    setIdx(++index);
};

const leftHandler = () => {
    if (index <= 0) return;
    setIdx(--index);
};

useEffect(() => {
    setPage(pages[index]);
}, [index]);
1
  • Большое спасибо!
    – Gevago
    26 сен 2022 в 8:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.