React 计时器代码不起作用，每次都输出 2

Question

以下是我的代码，我试图在每 1 秒后打印一次日期和时间，但我得到了输出 2。让我知道我在这里做错了什么以及为什么每次都输出 2 -

代码 - App.js 文件

import React from 'react';
import './App.css';

function Elem() {
  return <p>{new Date().toISOString()}</p>
}

const TimeElem = () => {
  return setInterval(Elem, 1000)
}

const App = () => {
  return (
    <div className="App">
      <h3>Hello World</h3>
      <TimeElem />
    </div>
  )
}

export default App;

代码 - index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'))
registerServiceWorker();

Answer 1

您应该执行如下操作：

class App extends Component {
  state = {
    timer: ''
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
  }
  timer = () => {
    this.setState({
      timer: new Date().toISOString()
    })
  }
  render() {
    return (
      <div className="App">
        <h3>Hello World</h3>
        <span>{this.state.timer}</span>
      </div>
    );
  }
};

Answer 2

输出2是因为setInterval(Elem, 1000)会return区间ID，调用clearInterval(<ID>).

时用到

考虑到这一点，下面是基于您的代码的工作片段：

class App extends React.Component {
  state = {
    interval: null,
    time: null
  }
  
  componentDidMount() {
    this.setState({ interval: setInterval(this.setTime, 1000) })
  }
  
  componentWillUnmount() {
    clearInterval(this.state.interval)
  }
  
  setTime = () => {
    this.setState({
      time: new Date().toISOString()
    })
  }
  
  render() {
    return (
      <div>{this.state.time}</div>
    );
  }
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id='root' />

Answer 3

你得到的只是setInterval函数的结果，而不是Elem的结果，setInterval的结果是你可以用[=13停止的区间id =]函数。

React 计时器代码不起作用，每次都输出 2

React timer code is not working and outputting 2 everytime

javascript

reactjs

ecmascript-6

react-dom