Проблема с обновлением состояния с помощью setInterval в приложении React - PullRequest
Новая
       134

Проблема с обновлением состояния с помощью setInterval в приложении React

1 голос
/ 09 мая 2020

У меня есть функция под названием getRandomHexagram(), которая возвращает случайную 6-символьную строку, которая используется для реквизита в моем <hexagram string={stringstate} /> компоненте в моем приложении гадания I Ching.

У меня также есть функция под названием resettimer(), который несколько раз извлекает эту случайную 6-символьную строку и передает ее моему компоненту в течение нескольких секунд, так что пока работает setInterval, компонент будет продолжать изменять свой внешний вид до тех пор, пока не будет вызван clearInterval.

Я хотел бы постоянно обновлять состояние с помощью функции resettimer(), выполняемой до ее завершения, а затем использовать новое состояние в другой функции вместе с clearInterval.

Что мне странно, так это то, что if часть таймера работает, компонент постоянно обновляется должным образом. Но когда я пытаюсь вызвать конечное состояние в операторе } else { вместе с clearInterval, консоль всегда показывает, что stringstate по-прежнему "VVVVVV", или что-то еще, что было последней опорой, которую мой компонент использовал в моем предыдущем щелчке, НЕ что мой компонент в настоящее время использует. 

function getRandomHexagram() {
  const flipcoins = () => {
    return (
      (Math.floor(Math.random() * 2) + 2) +
      (Math.floor(Math.random() * 2) + 2) +
      (Math.floor(Math.random() * 2) + 2)
    );
  };
  const drawline = (coinvalue) => {
    let line;
    if (coinvalue == 6) {line = "B";}
    if (coinvalue == 7) {line = "V";}
    if (coinvalue == 8) {line = "P";}
    if (coinvalue == 9) {line = "W";}
    return line;
  };
  return (
    drawline(flipcoins()) +
    drawline(flipcoins()) +
    drawline(flipcoins()) +
    drawline(flipcoins()) +
    drawline(flipcoins()) +
    drawline(flipcoins())
  );
}

function App() {

const [stringstate, setStringstate] = useState("VVVVVV");

  function resettimer() {
    var timesrun = 0;
    var randomtime = Math.floor(Math.random() * 15) + 10;
    const interval = setInterval(() => {
      timesrun += 1;
      if (timesrun < randomtime) {
        thisString = getRandomHexagram();
        setStringstate(thisString);

        console.log("the current permutation is: " + thisString);
        // console and component shows this correctly.
      } else {
        clearInterval(interval);

        console.log("the final state state is: " + stringstate);
        // Call another function here using the NEW stringstate
        // But console shows that stringstate is still showing 
        // the old state of VVVVVV despite my component showing otherwise
      }
    }, 100);
  }

... ...

  return (
    <div className="App">
      <Button onClick={() => resettimer()}>
      <Hexagram string={stringstate} />
    </div>
  );
}

При нажатии кнопки и вызове функции моя консоль показывает следующее: 

the current permutation is: VPPVPB
the current permutation is: VPPPVV
the current permutation is: BPBVBV
the current permutation is: VVPVPV
the current permutation is: PPBVPV
the current permutation is: PPPBBB
the current permutation is: VVPPPV
the final state state is: VVVVVV

Есть идеи, почему это происходит? Мы очень ценим любой совет.

...