Javascript 组件中的函数未执行

我有一个时间表应用程序的react功能组件，用户在其中选择时间，应用程序会告诉他们该周的总工作时间。在我的组件中，我有一个函数，它接受一系列值，并将它们相加，得到每周的总工作小时数

我得到了一个奇怪的结果，如果我以一种方式组织代码，它会工作，但是

这项工作：

  const calculateFinalTime = (times) => {
    const totalMinutes = times.reduce((acc, cur) => {
      return typeof cur.resultM === "number" ? (acc += cur.resultM) : acc;
    }, 0);
    const finalHrs = Math.floor(totalMinutes / 60);
    const finalMins = totalMinutes % 60;
    const stringHrs = String("0" + finalHrs).slice(-2);
    const stringMins = String("0" + finalMins).slice(-2);
    const finalTime = `${stringHrs}:${stringMins}`;
    return finalTime;
  };
  console.log(calculateFinalTime(times));

我的意思是，我在控制台中得到一个和的值

但这并不是：

  const [finalTime, setFinalTime] = useState("");

  const calculateFinalTime = (times) => {
    const totalMinutes = times.reduce((acc, cur) => {
      return typeof cur.resultM === "number" ? (acc += cur.resultM) : acc;
    }, 0);
    const finalHrs = Math.floor(totalMinutes / 60);
    const finalMins = totalMinutes % 60;
    const stringHrs = String("0" + finalHrs).slice(-2);
    const stringMins = String("0" + finalMins).slice(-2);
    const finalTime = `${stringHrs}:${stringMins}`;
    setFinalTime(finalTime);
  };

  console.log(finalTime);

由于某些原因，我的控制台中没有显示任何值。如果我试图在div中显示值，它也不起作用

---

任何人都可以告诉我为什么？

可能是第二个代码段没有调用

calculateFinalTime

，它只是尝试使用

finalTime
我猜这是因为在“finalTime”中使用了重复变量的名称

想一想，如果只更改一个变量名，它会很好地工作

const calculateFinalTime = (times) => {
    const totalMinutes = times.reduce((acc, cur) => {
      return typeof cur.resultM === "number" ? (acc += cur.resultM) : acc;
    }, 0);
    const finalHrs = Math.floor(totalMinutes / 60);
    const finalMins = totalMinutes % 60;
    const stringHrs = String("0" + finalHrs).slice(-2);
    const stringMins = String("0" + finalMins).slice(-2);
    const finalTime1 = `${stringHrs}:${stringMins}`;
    setFinalTime(finalTime1);
  };

  console.log(finalTime);

即使有多个同名变量，作用域变量也应优先。否则，在已声明变量的控制台中至少会出现语法错误。无论哪种方式，下面的代码都是您的代码的复制，并且工作正常


函数MyComponentClass（）{
常量{useState，useffect}=React
const[testTime，setTestTime]=useState（0）；
const[finalTime，setFinalTime]=useState（“”）；
常量calculateFinalTime=（次）=>{
const totalMinutes=减少次数（（acc，cur）=>{
返回类型cur.resultM==“number”？（acc+=cur.resultM）：acc；
}, 0);
const finalHrs=数学楼层（总分钟/60）；
const finalMins=总分钟数%60；
const stringHrs=字符串（“0”+finalHrs）.slice（-2）；
常量stringMins=String（“0”+finalMins）.slice（-2）；
const finalTime=`${stringHrs}:${stringMins}`；
设置最终时间（最终时间）；
};
useffect（（）=>{
calculateFinalTime（[{resultM:Number（testTime）}]）；
}，[testTime]）；
返回
setTestTime（event.target.value）}/>
你好，世界{最后时刻}
;
}
ReactDOM.render（，document.querySelector（#app））

是的。就是这样。另一个答案可能也起了作用（不确定），但问题是我认为当组件呈现时函数会自动执行。这可能起了作用，我认为另一个问题是我没有像另一个答案建议的那样调用函数。谢谢你的帮助