Значение списка рендеринга обновлено с помощью метода hook

Question

Существует приложение счетчика, которое должно визуализировать, как происходит обратный отсчет.

первый рендер должен быть 10

второй рендер должно быть 10 9

третий рендер должен быть 10 9 8

и т. д. *

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

Таймер используется для обновления значения обратного отсчета каждые 1,5 секунды. В операторе console.log значение переменной обновляется, но повторная визуализация компонента не выполняется.

import React, { useState, useRef } from "react";

import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const ListCounter = props => {
  const [count, setCount] = useState([10]);
  const [timerId, setTimerId] = useState(null);
  const countRef = useRef(count);
  countRef.current = count;
  const timerIdRef = useRef(timerId);
  timerIdRef.current = timerId;

  function calculate() {
    initialize();
  }

  const initialize = () => {
    setTimerId(
      setInterval(() => {
        let temp = countRef.current;
        if (temp[temp.length - 1] === 6) {
          clearInterval(timerIdRef.current);
          console.log("STOP!");
        } else {
          setCount(count => {
            temp.push(temp[temp.length - 1] - 1);
            console.log("TEMP: ", temp);
            return temp;
          });
        }
      }, 1500)
    );
  };

  return (
    <div>
      <Grid container justify="center">
        <Grid item>
          {count.map((v1, i) => {
            return (
              <Typography key={i} variant="h1" component="h2" gutterBottom>
                {v1},
              </Typography>
            );
          })}

          <Button variant="contained" onClick={calculate}>
            Count down
          </Button>
        </Grid>
      </Grid>
    </div>
  );
};

export default ListCounter;

Найдите ссылку CodeSandbox для полного кода

* 1024. * Любые предложения приветствуются.

Answer 1

Спасибо @JaredSmith за указание в правильном направлении.

const initialize = () => {
    setTimerId(
      setInterval(() => {
        let temp = countRef.current.slice(); // <---------
        if (temp[temp.length - 1] === 6) {
          clearInterval(timerIdRef.current);
          console.log("STOP!");
        } else {
          setCount(count => {
            temp.push(temp[temp.length - 1] - 1);
            console.log("TEMP: ", temp);
            return temp;
          });
        }
      }, 1500)
    );
  };