React打字竞速应用WPM计算返回NaN问题求助

我是React新手，正在开发一款打字竞速应用。目前需要计算WPM（每分钟单词数），但计算结果始终返回NaN。我已检查确认计算时所有变量均有正确取值，无空值情况。

相关代码 #

App.js #

import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';
import getTime from './CurrentTime.js';

const App = () => {
  const [typeracertext, setTyperacertext] = useState("My name is Ruslan. ");
  const [userText, setUserText] = useState("");
  const [wholeText, setWholeText] = useState("");
  const [startTyping, setStartTyping] = useState("");
  const [endTyping, setEndTyping] = useState("");
  var [countWords, setCountWords] = useState(0);

  const wordsPerMinute = (startTime, endTime, words) => {
      return 60 / ({endTime} - {startTime}) * words
  }

  const onChange = (e) => {
      if (wholeText === "")
      {
          setStartTyping(getTime.getTime);
      }
      if (typeracertext.substring(0, wholeText.length+1).slice(-1) === e.target.value.slice(-1))
      {  
          setUserText(e.target.value);
          e.target.style.color = 'black';
          if (typeracertext.substring(0, wholeText.length+1).slice(-1) === " ")
          {
               e.target.value = "";
               setWholeText(wholeText + " ");
               setCountWords(countWords + 1);
          }  

          else
          {
              setWholeText(wholeText + ((e.target.value).slice(-1)));
          }
      }

      else
      {
          e.target.style.color = 'red';
      }

      if (wholeText === typeracertext.substring(0, typeracertext.length-2))
      {
          setEndTyping(getTime.getTime);
          e.target.value = "";
      }
  };

  return (
      <div className="wrapper">
          <div className="box c">
          <span className="userText">{wholeText}</span>{typeracertext.substring(wholeText.length, typeracertext.length)}

          {endTyping != "" &&
          <span className="wpmUser">{wordsPerMinute(startTyping, endTyping, countWords)}</span>}
      </div>
      </div>
  );
}

export default App;

CurrentTime.js #

import React from 'react';

const getTime = () => {
    const current = new Date();
      return(current.getHours()*60*60 + current.getMinutes()*60 + current.getSeconds());  
}

export default {getTime};

补充说明 #

已确认变量已正确传递。

核心问题及修复步骤： #

1. wordsPerMinute函数语法错误
   你在计算时间差时用了{endTime} - {startTime}，这是无效的JS语法，会被解析成两个空对象相减，结果必然是NaN。直接改为变量相减即可：

   const wordsPerMinute = (startTime, endTime, words) => {
       return 60 / (endTime - startTime) * words
   }
   

2. 未调用getTime函数，仅传递了函数引用
   在setStartTyping和setEndTyping中，你赋值的是getTime.getTime（函数本身），而不是调用它获取时间值。需要添加括号执行函数：

   // 开始计时时
   setStartTyping(getTime.getTime());
   // 结束计时时
   setEndTyping(getTime.getTime());
   

3. JSX结构不完整
   你的返回部分中<div className="box c">没有正确闭合，会导致React渲染报错，需要补充闭合标签（已在代码示例中修正）。

修改完成后，WPM的计算就能正常返回数值了。

内容的提问来源于stack exchange，提问作者RVasilev