ComponentDidMount не работает и ошибка не отображается - PullRequest
Новая
       57

ComponentDidMount не работает и ошибка не отображается

0 голосов
/ 13 января 2020 
class Clock extends React.Component {
state = { time: new Date().toLocaleTimeString() };
componentDidMount() {
    setInterval(() => {
        this.setState = ({ time: new Date().toLocaleTimeString()})
    }, 1000)
}
render() {
    return (
        <div className="time">
            the time is :{this.state.time}
        </div>
    );
 }
};

это простое приложение с тактовой реакцией, где ComponentDidMount не работает

Ответы [ 3 ]

0 голосов
/ 13 января 2020

setState - это функция, она должна вызываться, а не назначаться. Также не забудьте удалить таймер при размонтировании, чтобы предотвратить утечку памяти. Вот рабочий пример

https://codesandbox.io/s/silent-cookies-zwsog

0 голосов
/ 13 января 2020

хорошо, setState вызовет некоторые из жизненных циклов этого компонента, повторно выполнит его рендеринг и, между прочим, заново воспроизведет все дочерние элементы этого компонента, вот рабочий пример https://codesandbox.io/s/blazing-resonance-kjoyi

import React, { Component } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: null
    };
    this.handleSetTime = this.handleSetTime.bind(this);
    this.timer = null;
  }
  componentDidMount() {
    this.handleSetTime();
    this.timer = setInterval(this.handleSetTime, 1000);
  }
  handleSetTime() {
    this.setState({
      time: new Date().toLocaleTimeString()
    });
  }
  render() {
    const { time } = this.state;
    return <div className="time">the time is:{time}</div>;
  }
  componentWillMount() {
    clearInterval(this.timer);
    this.timer = null;
  }
}

export default Clock;

Я предлагаю вам использовать ref, чтобы выбрать элемент dom и обновлять его каждую секунду, делая это, никакой повторной визуализации не будет, и поскольку это будет компонент без состояния, он будет иметь еще лучшую производительность .

вот пример с состоянием с ref https://codesandbox.io/s/still-framework-xxxeg

import React, { Component, createRef } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.ref = createRef();
    this.timer = null;

    this.handleUpdateTimer = this.handleUpdateTimer.bind(this);
  }
  componentDidMount() {
    this.handleUpdateTimer();
    this.timer = setInterval(this.handleUpdateTimer, 1000);
  }
  handleUpdateTimer() {
    this.ref.current.innerText = new Date().toLocaleTimeString();
  }
  render() {
    return (
      <div className="App">
        time is: <span ref={this.ref} />
      </div>
    );
  }
  componentWillUnmount() {
    clearInterval(this.timer);
    this.timer = null;
  }
}

export default Clock;

и, наконец, лучший компонент без компонента, использующего хуки https://codesandbox.io/s/silent-leftpad-cc4mv 

import React, { useRef, useEffect } from "react";

const Clock = () => {
  const ref = useRef();
  useEffect(() => {
    setTimer();
    const timer = setInterval(setTimer, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  const setTimer = () => {
    ref.current.innerText = new Date().toLocaleTimeString();
  };

  return (
    <div className="App">
      time is : <span ref={ref} />
    </div>
  );
};

export default Clock;
0 голосов
/ 13 января 2020

setState - это функция: 

this.setState({ time: new Date().toLocaleTimeString()})

setState() ставит в очередь изменения состояния компонента и сообщает React, что этот компонент и его дочерние элементы должны быть перезапущены с обновленным состоянием.

...