Код таймера реакции не работает и выдает 2 каждый раз - PullRequest
Новая
       18

Код таймера реакции не работает и выдает 2 каждый раз

0 голосов
/ 25 сентября 2018

Ниже приведен мой код, в котором я пытаюсь напечатать дату и время через каждые 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();

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Это выводит 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' />
0 голосов
/ 25 сентября 2018

Вы просто получаете результат функции setInterval, а не результат Elem, а результат setInterval является идентификатором интервала, который вы можете остановить с помощью функции clearInterval.

0 голосов
/ 25 сентября 2018

Вы должны сделать что-то вроде следующего: 

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>
    );
  }
};
...