[英]React. getTime() function does not update the state
我试图通过外部函数getTime()
更新组件Demoss
的状态。 我想在页面加载state time
开始更新state time
中的state time
。 为了使它成为现实,我在componentDidMount
调用了它。 但由于某些原因,它不会发生。
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './index.css';
function getTime() {
let a = setInterval(() =>
{new Date()}, 1000
);
return a;
}
class Demoss extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '',
timer: false
};
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
this.setState({
time: getTime() // invoke setInterval state update, but it does not work
});
}
componentWillUnmount() {
clearInterval(getTime());
}
handleClick() {
this.setState(prevState => ({
timer: !prevState.timer
}));
if (this.state.timer === false) {
clearInterval(this.timerId);
} else if (this.state.timer === true) {
}
}
render() {
return (
<div>
<p>{this.state.time.toString()}</p>
<button onClick={this.handleClick}><Dimes timer={this.state.timer}/></button>
</div>
);
}
}
class Dimes extends React.Component {
render() {
if (this.props.timer === true) {
return (
<React.Fragment>
Start timer again!
</React.Fragment>
);
} else {
return (
<React.Fragment>
Start timer!
</React.Fragment>
);
}
}
}
ReactDOM.render(
<Demoss />,
document.getElementById('root'));
通过进行以下更改,它将更新时间并重新渲染组件。
let timeTicker = (self)=> {self.setState({
time:new Date().toString()
});}
class Demoss extends React.Component {
componentDidMount(){
let timer=setInterval(()=>timeTicker(this),1000);
this.setState({timer:timer});
// keep the setInterval reference in state just so you can call clearInterval on this on `componentWillUnmount` hook
}
componentWillUnmount(){
clearInterval(this.state.timer);
}
}
new Date().toString()
只是为了测试我将日期转换为字符串,但我认为在渲染之前您必须将其格式化为字符串。
我确实省略了handleClick
func 你可以弄清楚
你的代码有一些错误,所以我重写了它。
import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
class Demoss extends React.Component {
constructor(props) {
super(props);
this.state = {
start_time: new Date(),
now_time: new Date(),
timer: false
};
this.handleClick = this.handleClick.bind(this);
this.timer = this.timer.bind(this);
}
componentDidMount() {
setInterval(this.timer, 1000);
}
componentWillUnmount() {
// use intervalId from the state to clear the interval
clearInterval(this.state.intervalId);
}
handleClick() {
const state = this.state;
state.start_time = new Date();
state.now_time = new Date();
if(!this.state.timer)
state.timer = true;
this.setState(state);
}
timer() {
if(this.state.timer)
this.setState({ now_time : new Date()});
}
render() {
const getTimeDiff = (start_time, now_time) => {
return Math.round((now_time.getTime() - start_time.getTime()) / 1000);
};
return (
<div>
<p>{getTimeDiff(this.state.start_time, this.state.now_time)}</p>
<Dimes handleClick={this.handleClick} timer={this.state.timer} />
</div>
);
}
}
class Dimes extends React.Component {
render() {
const renderButtonText = timer => {
let text = "Start timer";
if (timer) text += " again!";
else text += "!";
return text;
};
return (
<button onClick={this.props.handleClick}>
{renderButtonText(this.props.timer)}
</button>
);
}
}
ReactDOM.render(<Demoss />, document.getElementById("root"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.