reactjs - 在哪里调用 setInterval 反应
问题描述
我是新来的反应。我想使用 setState 和 setInterval 创建一个计数器。我不想将 react.dom 渲染放在一个间隔中,因为我知道这不是一个好习惯。这是我到目前为止的努力:
class Counter extends React.Component {
state = {
counter: 0
}
increment = () => {
setInterval(() => {
this.setState({
counter: this.state.counter+1});
}, 1000);
};
render() {
return <div>
<p>{this.state.counter}</p>
</div>;
}
}
const el = <Counter />;
ReactDOM.render(
el, document.getElementById('root')
);
我也尝试过这种方式:
class Counter extends React.Component {
state = {
counter: 0
}
increment = () => {
this.setState({
counter: this.state.counter+1});
};
render() {
return <div>
<p>{this.state.counter}</p>
</div>;
}
}
setInterval(Counter.increment, 100)
const el = <Counter />;
ReactDOM.render(
el, document.getElementById('root')
);
他们都没有工作。问题是什么?
解决方案
您没有调用该increment
函数。你必须在里面调用它componentDidMount()
。
class Counter extends React.Component {
state = {
counter: 0
}
increment = () => {
setInterval(() => {
this.setState({
counter: this.state.counter+1});
}, 1000);
};
componentDidMount(){
this.increment();
}
render() {
return <div>
<p>{this.state.counter}</p>
</div>;
}
}
ReactDOM.render(<Counter/>, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- go - 为什么 Regexp.ReplaceAllString 会转义替换字符串中的某些字符?
- moryx - 如何将不同的配置放入同一接口的自定义插件实现中?
- html - 提交前如何保存表单中的输入数据?
- python - 如何在 python 中使用 uber h3 将 shapefile/geojson 转换为六边形?
- python - 作为应用程序在本地运行全栈烧瓶应用程序
- python - 重复捕获组
- java - 用于将用户批量上传到 Azure B2C 活动目录的 Java 控制台应用程序
- sql - 尝试在 Hive 查询中连接包含 HTML 的字符串时出现 ParseException
- javascript - jQuery启用/禁用提交按钮
- r - R如何基于汇总数据库添加线性趋势线