Как правильно сделать в React проверку данных?

Question

[Paul14]

Делаю вертикальный слайдер, возникла проблема. Вот упрощенный пример. Ссылка на сандбокс:

https://codesandbox.io/s/determined-shirley-wcek08...

Только при клике на кнопки должна происходить прокрутка слайдера. Есть функция проверки данных testing . Если пользователь нажал на определенную кнопку (в нашем случае "go to 3 slide"), то слайдер должен прокрутиться к определенному слайду. Как видим есть задержка в один шаг.

В функции проверки testing не должно передаваться никаких аргументов. Значение для проверки должно браться из стейта string, который не успевает обновиться:

const clickToBtn = (e) => {
    setString(e.target.textContent);
    testing();
  };

Как оптимально избавится от такой проблемы? Нужно чтобы было срабатывание только после клика по кнопкам.

Comments

[WbICHA]

const clickToBtn = (e) => {
    testing(e.target.textContent);
  };

  const testing = (string) => {
    if (string === "go to 3 slide") {
      setCount(3);
      return false;
    }
    setCount(count + 1);
  };

  useEffect(() => {
    if (!flag) return false;
    scroll(count);
  }, [count]);

[WbICHA]

Если таки юзстейт со значением из онклика нужен, то можно убрать функцию тестинг из онклика и запихнуть в юзэффект с зависимостью от стринга.

Answer 1

[Kentavr16]

useEffect(()=>{
    srollContainer.current.scrollTo({ top: count * 100, behavior: "smooth" });
  })

просто именно при ререндере скролить к нужному месту.

Comments

[Kentavr16]

То есть функцию scroll можно попросту удалить из онклик.

[Paul14]

Спасибо, есть ли способ сделать useEffect только при клике на кнопку, чтобы он не отрабатывал сразу. Я нашел решение только через флаг, который объявляется как useRef(false), а при клике на кнопку ставится значение в true.

useEffect(()=>{
       if(!flag.current) return;
       ...
    },[parameter])

[Kentavr16]

Paul14, Я не совсем понимаю чего именно вы добиваетесь. Скорее всего нужного эффекта можно добиться штатными средствами реакта, не усложняя себе жизнь многочисленными хуками. Какой именно функционал вы хотите реализовать?

[Kentavr16]

Paul14, вот этот код вроде отрабатывает вполне корректно

import "./styles.css";
import { useState, useRef, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const srollContainer = useRef(null);
  useEffect(()=>{
    srollContainer.current.scrollTo({ top: count * 100, behavior: "smooth" });
  })
  const clickToBtn = (e) => {
    testing(e);
   
  };

  const testing = (e) => {
    if (e.target.textContent === "go to 3 slide") {
      setCount(3);
      return false;
    }
    setCount(count + 1);
  };

  return (
    <div className="App">
      <h2>COUNT: {count}</h2>
      <div className="btn" onClick={clickToBtn}>
        next
      </div>
      <div className="btn" onClick={clickToBtn}>
        go to 3 slide
      </div>
      <div className="btn" onClick={clickToBtn}>
        next
      </div>
      <div className="btn" onClick={clickToBtn}>
        next
      </div>

      <div className="scrollContainer" ref={srollContainer}>
        <div className="scrollContent">0</div>
        <div className="scrollContent">1</div>
        <div className="scrollContent">2</div>
        <div className="scrollContent">3</div>
        <div className="scrollContent">4</div>
        <div className="scrollContent">5</div>
        <div className="scrollContent">6</div>
      </div>
    </div>
  );
}

[Paul14]

Kentavr16, Блин, в том то и дело что трудно подобрать упрощенный пример, который в полной мере передаст проблему. Да, код отрабатывает, все верно. useEffect это выход.

Я переписал код, который больше отражает проблему.
https://codesandbox.io/s/determined-shirley-wcek08...

У меня есть некоторая функция testing проверки в которую я не хочу передавать ни какие аргументы. Я хочу брать их из стороннего стейта (string). И вот получается, что возникает задержка в выполнении, потому что в функции clickToBtn мы обращаемся к функции testing, в которой проверяем стейт string, который не успел "замениться", потому что б**** он должен меняться в одной функции с testing() :

const clickToBtn = (e) => {
    setString(e.target.textContent);
    testing();
  };

Я уже много чего перепробывал. Должен быть способ проще и лаконичнее, чтобы все работало и не городить костыли.

const [count, setCount] = useState(0);
  const [string, setString] = useState("");
  const srollContainer = useRef(null);
  const flag = useRef(false);

  const scroll = (n) =>   srollContainer.current.scrollTo({ top: n * 100, behavior: "smooth" });

  const clickToBtn = (e) => {
    setString(e.target.textContent);
    testing();
  };

  const testing = () => {
    if (string === "go to 3 slide") {
      setCount(3);
      return false;
    }
    setCount(count + 1);
  };

  useEffect(() => {
    if (!flag) return false;
    scroll(count);
  });

[WbICHA]

Kentavr16, зачем ты такой ужас предлагаешь?(

[Kentavr16]

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

[Paul14]

Kentavr16, Я написал вот недавно сообщение.

[WbICHA]

Kentavr16, открой его сендбокс, у него переход использует предыдущий стейт, а должен текущий.
Глянь мой ответ в комментах, думаю поймёшь.)

[Paul14]

WbICHA, да, все верно. Стейт не изменяется.

[Kentavr16]

WbICHA, дык в сандбоксе уже не тот код, который был при открытии вопроса.

[WbICHA]

Kentavr16, хм, действительно. Но в любом случае юзэффект без зависимостей вызывает вопросы.)