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

之所以输出2是因为setInterval(Elem, 1000)将返回间隔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 2

您应该执行以下操作：

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 3

您只得到setInterval函数的结果，而不是Elem的结果，而setInterval的结果是可以用clearInterval停止的间隔的ID功能。

React计时器代码无法正常工作，每次都输出2

3 个答案: