Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 27.04.2016
Сообщений: 43

SetTimeOut

02.12.2022, 18:36. Показов 509. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Я написал слайдер в Реакт, и добавил функцию setTimeout что бы каждые несколько секунд слайды переключались, и не могу понять почему prevState в функции увеличивается на 2, а не на 1 как я написал
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from "react";
import PropTypes from "prop-types";
import { useState } from "react";
const Slider = ({ slider }) => {
  const [slide, setSlide] = useState(0);
  const handleSlide = (index) => {
    setSlide(index);
  };
  setTimeout(() => {
    console.log(slide);
    setSlide((prevState) =>
      prevState === slider.length - 1 ? 0 : (prevState += 1)
    );
  }, 3000);
  return (
    <div className="main__slider">
      <div className="main__textBox">
        <p>{slider[slide]}</p>
      </div>
      <ul className="main__dots">
        {slider.map((dot, index) => (
          <li className="main__dots-item" key={index}>
            <button
              type="button"
              onClick={() => handleSlide(index)}
              className={
                "main__dot" + (slide === index ? " main__dot-active" : "")
              }
            ></button>
          </li>
        ))}
      </ul>
      ;
    </div>
  );
};
Slider.propTypes = {
  slider: PropTypes.array.isRequired,
};
export default Slider;
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
02.12.2022, 18:36
Ответы с готовыми решениями:

getDerivedStateFromProps и setTimeOut
Подскажите такую вещь, я не до конца догоняю логики реакта, времени не особо много на доки. App export default class App...

Почему не работает setTimeout
var helloWorldApp = angular.module(&quot;helloWorldApp&quot;, ); helloWorldApp.controller(&quot;HelloWorldCtrl&quot;, function ($scope) { ...

setTimeout
вот ф-ция setTimeout (function(){ jQuery(document).ready(function(){ // Instantiate jTicker jQuery(&quot;#ticker&quot;).ticker({ ...

6
77 / 50 / 29
Регистрация: 21.10.2022
Сообщений: 114
02.12.2022, 21:21
В режиме разработки? Там два раза жизненный цикл вызывается https://reactjs.org/docs/stric... de-effects
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,146
Записей в блоге: 14
03.12.2022, 02:57
Цитата Сообщение от Igor-san Посмотреть сообщение
Там два раза жизненный цикл вызывается
поправочка не жизненный цикл, а монтирование, и нужно уточнение что это только в react >=18 в режиме разработки и с включенным strict mode. Жизненный цикл как раз и описывает все состояния котороые проходит компонент в течении своейей жизни:
* React mounts the component.
- * Layout effects are created.
- * Effect effects are created.
* React simulates effects being destroyed on a mounted component.
- * Layout effects are destroyed.
- * Effects are destroyed.
* React simulates effects being re-created on a mounted component.
- * Layout effects are created
- * Effect setup code runs

В данном случае setTimeout нужно вызывать в хуке useEffect иначе будет он вызывается каждый раз как компонент перерисовывается

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from "react";
import "./styles.css";
 
export default function App() {
  const [state, setState] = React.useState(0);
  React.useEffect(() => {
    setTimeout(() => {
      setState(state + 1);
    }, 3000);
  }, [state]);
 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>State: {state}</div>
    </div>
  );
}
0
0 / 0 / 0
Регистрация: 27.04.2016
Сообщений: 43
03.12.2022, 08:22  [ТС]
в useEffect это почти работает, если обновить страницу то на первом круге сразу с первого слайда он прыгает на 3й, а после работает так как надо, даже если пробежит все слайды и пойдет на новый круг то будет увеличиваться всегда на один, но в самый первый раз почему то на 2
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,146
Записей в блоге: 14
03.12.2022, 12:18
JavaScript
1
2
3
4
5
6
React.useEffect(() => {
   setTimeout(() => {
     setSlide( slide === slider.length - 1 ? 0 : (slide + 1)
     );
   }, 3000);
}, [slide]);
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,146
Записей в блоге: 14
05.12.2022, 01:57
На слчай если изменения будут сделаны не только с помощью таймера

JavaScript
1
2
3
4
5
6
7
8
  const timeout = React.useRef();
  React.useEffect(() => {
    clearTimeout(timeout.current);
    timeout.current = setTimeout(
      () => setSlide(slide === slider.length - 1 ? 0 : slide + 1),
      3000
    );
  }, [slide]);
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3806 / 1643 / 428
Регистрация: 14.03.2022
Сообщений: 4,086
05.12.2022, 09:35
mr_dramm, так же нужно еще помнить, если элемент будет "крашиться" - нужно удалять все его "таймеры".
JavaScript
1
2
3
4
5
6
7
8
9
  const timeout = React.useRef();
  React.useEffect(() => {
    clearTimeout(timeout.current);
    timeout.current = setTimeout(
      () => setSlide(slide === slider.length - 1 ? 0 : slide + 1),
      3000
    );
    return _ => clearTimeout(timeout.current)
  }, [slide]);
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
05.12.2022, 09:35
Помогаю со студенческими работами здесь

setTimeout
Добрый день! Подскажите, почему не работает setTimeout? const list = document.querySelector(&quot;.list&quot;); const home =...

SetTimeout
... хотя может быть проблема в чём-то другом (руки неоттуда растут?), но я всёже грешу на этот гадский таймер. Короче, я пытаюсь сделать,...

SetTimeout
Надо чтобы квадраты меняли цвет на зеленый, сначала один, потом другой и снова. Что тут может быть не так? &lt;!DOCTYPE html&gt; ...

SetTimeout
Привет знатокам. У меня не большая проблема с таймером. Хочу что бы сообщение выбилось через 1 секунду. ...

SetTimeout и canvas
Привет! Вот код рисования в canvas на нажатие ЛКМ, рисую маленький квадратик. &lt;canvas class=&quot;pa corner&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Ниже машинный перевод статьи The Thinkpad X220 Tablet is the best budget school laptop period . Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы,. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru