Почему моя функция 'setInterval' не может повторно вызывать функцию 'tick ()'? (реагировать. js) - PullRequest
Новая
       77

Почему моя функция 'setInterval' не может повторно вызывать функцию 'tick ()'? (реагировать. js)

0 голосов
/ 18 июня 2020

Я попытался прочитать, что происходит, и обнаружил, что использование стрелочной функции внутри функции tick () решает проблему, но я не понимаю почему. Может кто-нибудь объяснить? 

import React from "react";
    import ReactDOM from "react-dom";

    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = { date: new Date() };
      }
      componentDidMount() {
        setInterval(this.tick(), 1000);
      }
      tick() {
        this.setState({ date: new Date() });
      }
      render() {
        return (
          <div>
            <h1>Hello, World</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

    ReactDOM.render(<Clock />, document.getElementById("root"));

Ответы [ 2 ]

0 голосов
/ 18 июня 2020
Функция

setInterval и это ключевое слово:

setInterval выполняется в контексте, отличном от контекста класса. Таким образом, внутри setInterval ключевое слово this указывает не на класс, а на событие, вызвавшее setInterval. Поэтому, когда вы определяете его с помощью => (обозначение жирной стрелки), 'это' ключевое слово 'автоматически привязывается' к содержащему его классу.

0 голосов
/ 18 июня 2020

Вам нужно привязать вашу функцию галочки в конструкторе. 

constructor(props) {
    super(props);
    this.state = { date: new Date() };
    this.tick = this.tick.bind(this); // here
  }

И не забудьте очистить интервал в componentWillUnmount жизненном цикле

...