为什么这个函数在DOM中生成NaN?(反应)

Question

所以我正在开发应用程序的这一部分，我希望页面上显示的数字根据一天中的时间增加或减少。在这一点上，我使用componentDidMount()来使用setInterval()方法，该方法接受函数(hourCheck(和区间。

然而，hourCheck存在问题，特别是它在DOM中返回NaN而不是实际数字。看起来状态没有得到正确的改变，但我很确定是以什么方式改变的。

这是我正在使用的app.js文件。为了时间起见，我将间隔设置为8000毫秒。这最终是一个计数器应用程序。

import React, { Component, useState } from "react";
import { Wrapper } from "./components/Wrapper";
import Title from "./components/Title";
import Count from "./components/Count";
import "./App.css";
class App extends Component {
state = {
CountNum: 0,

};

setCountNum = (val) => {
this.setState({CountNum: val})
}
hourCheck = (val) => {


let hourCount = new Date().getHours()


if (hourCount >= 9 && hourCount <= 17) {
this.setState({ CountNum: val + 1 });
} else if (hourCount <= 8) {
this.setState({ CountNum: val - 1});
} else if (hourCount >= 18) {
this.setState({ CountNum: val - 1});
}
console.log(hourCount)
};
loginSomething = (val) => {
console.log(this.state.HourNum)
};


render()
{
return (
<Wrapper setCountNum={this.setCountNum} CountNum={this.state.CountNum}>
<Title>Click Counter</Title>
<Title>Count:</Title>
<Count>{this.state.CountNum}</Count>
</Wrapper>
);
}
componentDidMount() {
setInterval(this.hourCheck, 8000);

};

}

export default App;

Answer 1

hourCheck函数有val参数，您没有在componentDidMount的setInterval中传递该参数。绑定"；这个"；obj到setInterval中的hourCheck函数。