Почему моя регистрация в режиме «не определено» в реагировании «не определен»? ⇐ Javascript

[Anonymous]

Я создал пользовательский крюк React для секундомерного часа, который использует Usestate и SetInterval для обновления счетчика каждую секунду. Счетчик, кажется, работает в том смысле, что он сбрасывается до 0, когда он достигает 5 (который затем добавляет новый продукт в мой компонент), но когда я регистрирую счетчик в обратном вызове SetInterval, он печатает «не определенный» сначала, а затем «NAN» на последующих клещах.import { useState, useRef } from "react";

export const useStopWatch = (initialCounter = 0) => {
const [counter, setCounter] = useState(initialCounter);
let intervalid = useRef(false);

const start = () => {
if (!intervalid.current)
intervalid.current = setInterval(() => {
setCounter((count) => count + 1);
console.log("counter is: " + counter);
}, 1000);
};

const stop = () => {
clearInterval(intervalid.current);
intervalid.current = false;
};

const reset = (initialCounter) => {
setCounter(initialCounter);
};

return {
counter,
start,
stop,
reset,
};
};

< /code>
А вот как я использую крюк в компоненте своих продуктов: < /p>
import React, { useEffect, useState } from "react";
import { useStopWatch } from "./useStopWatch";

const PRODUCTS = [
{ id: 123, name: "Product 1", description: "product 1 description", price: 200 },
{ id: 143, name: "Product 2", description: "product 2 description", price: 260 },
{ id: 272, name: "Product 3", description: "product 1 description", price: 410 },
];

const Products = () => {
const [products, setProducts] = useState([]);
const { counter, start, stop, reset } = useStopWatch();

useEffect(() => {
start();
console.log("count is ", counter);
const fetchProducts = async () => {
const fetchedProducts = await getProducts();
setProducts(fetchedProducts);
};
fetchProducts();
return () => {
console.log("count is ", counter);
stop();
};
}, []);

useEffect(() => {
console.log("Count in second useEffect is ", counter);
}, [counter]);

useEffect(() => {
if (counter < 5) return;
const fetchProducts = async () => {
if (counter >= 5) {
const fetchedProducts = await getProducts();
fetchedProducts.push({
id: Math.random(),
name: "Product 4",
description: "product 4 description",
price: 1920,
});
setProducts(fetchedProducts);
reset(0);
}
};
fetchProducts();
}, [counter, reset]);

const getProducts = async () => {
return new Promise((resolve, reject) => {
const isError = false;
setTimeout(() => {
if (isError) reject("Something happens during fetching products");
resolve(PRODUCTS);
}, 2000);
});
};

return (

Products
{products.map((product) => (

{product.name}
{product.description}
Price: {product.price}

))}

);
};

export default Products;

< /code>
Я ожидаю, что счетчик будет
1
2
3
4
5
не расстроен, тогда nan < /p>

Подробнее здесь: https://stackoverflow.com/questions/795 ... d-then-nan