如何在计数器中的增量之间删除 NaN 值?

Question

我已经为我的反应组件设置了一个计数器。它从数据库中获取一个数字(5(，然后每秒乘以它，它工作正常，但我看到5-NaN-10-NaN-15-NaN等增量之间的NaN值。我该如何解决这个问题？ 下面是我的代码，提前感谢。

import React, {useState,useEffect} from 'react'
import firebase from '../config/Fire'
function useTimes(){
const [kullanici,setTimes] = useState([])
useEffect(()=>{
firebase
.firestore()
.collection('kullanici')
.doc('gNfFy0uEsk5OvrZOfkGm')
.onSnapshot((doc)=>{
const newTimes = doc.data()
setTimes(newTimes)
})
},[])
return kullanici
}
function carp(value){
let counter=1;
setInterval(function(){
document.getElementById("count").innerHTML = value*counter
counter++;
},1000);
}
const Main = () => {
const kullanici =useTimes()
return(
<div>
<li>Silver: <span id="count">{carp(kullanici.silver)}</span></li>
</div>
)
}

export default Main

Answer 1

避免直接修改 DOM(carp()(，让 React 来处理。由于 React 的渲染周期，这会导致不可预测的行为。

将间隔移动到钩子中，将计数器移动到状态。

import React, { useEffect, useState, useRef } from 'react';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
function useTimes(){
const [kullanici,setTimes] = useState([])
useEffect(()=>{
// Just using setTimeout here to simulate a database call
setTimeout(() => {
setTimes({silver: 5});
}, 1000)
}, [setTimes])
return kullanici
}
function App() {
const kullanici = useTimes();
const [count, setCount] = useState(1);
useInterval(() => {
setCount(count + 1);
}, 1000)
return (
<div>
<li>
Silver: <span id="count">{
kullanici.silver ? count * kullanici.silver : ''
}</span>
</li>
</div>
);
}

Answer 2

我建议在你的代码中使用Number()：

function carp(value){
let counter=1;
setInterval(function(){
document.getElementById("count").innerHTML = Number(value)*counter
counter++;
},1000);
}

Answer 3

kullanici.silver的类型是什么？number还是string？如果是string，则document.getElementById("count").innerHTML = value*counter的结果将NaN。