Реагируйте: Обновление компонента - PullRequest
Новая
       5

Реагируйте: Обновление компонента

0 голосов
/ 23 мая 2018

Я не уверен, что мне здесь не хватает.Я новичок в React и JS в целом.Ниже приведен полный код одного файла вместе с фрагментом, который я заинтересован в исправлении.

Я пытаюсь использовать setInterval для обновления состояния каждую секунду, чтобы время заново отображалось и обновлялось соответственноэкран.Консоль выходит из системы «Привет!»Заявление каждую секунду, но время никогда не обновляется.Что мне здесь не хватает?

Спасибо за любую помощь! 

import React, { Component } from 'react';

import DateDay from '../Date/Date';
import Time from '../Time/Time';
import './timedate.css'



class TimeDate extends Component{
  state = {
    curDate: '',
    curTime: '',
  };


componentDidMount() {


  const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  const optionsTime = { hour: '2-digit', minute: '2-digit' };
  const today = new Date();

  setInterval( () => {
    this.setState({curDate : today.toLocaleString("en-us", optionsDate)}),
    this.setState({curTime : today.toLocaleString("en-us", optionsTime).slice(0, -3)}) //slice removes the AM/PM
    console.log('Hello!')
  },1000)
}

render () {
  let { curDate } = this.state;
  let { curTime } = this.state;

  return (
    <div className="timedate">
       <DateDay 
          dateDay={curDate}
        />
        <Time 
          time={curTime}
        />
    </div>
         );
      }
}

export default TimeDate;

Ответы [ 3 ]

0 голосов
/ 23 мая 2018

Вы неправильно инициализировали состояние.Инициализация состояния должна быть в конструкторе. 

constructor() {
  super();
  this.state = {
    curDate: '',
    curTime: '',
  }
}
0 голосов
/ 23 мая 2018

Вы не визуализируете секунды, поле, поэтому каждую секунду данные не будут обновляться, также вам нужно вычислить дату внутри setInterval 

class TimeDate extends React.Component {
      state = {
        curDate: "",
        curTime: ""
      };

      componentDidMount() {
        const optionsDate = {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric"
        };
        const optionsTime = {
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit"
        };

        setInterval(() => {
          const today = new Date();
          this.setState({ curDate: today.toLocaleString("en-us", optionsDate) }),
            this.setState({ curTime: today.toLocaleString("en-us", optionsTime) }); //slice removes the AM/PM
          console.log("Hello!");
        }, 1000);
      }

    render () {
      let { curDate } = this.state;
      let { curTime } = this.state;

      return (
        <div className="timedate">
           <DateDay 
              dateDay={curDate}
            />
            <Time 
              time={curTime}
            />
        </div>
      );
    }
}

Рабочая ДЕМО

0 голосов
/ 23 мая 2018

Вы всегда используете одну и ту же дату 

componentDidMount() {


  const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  const optionsTime = { hour: '2-digit', minute: '2-digit' };
  // const today = new Date(); captures current date for every next call.

  setInterval( () => {
    const today = new Date(); // move it here
    this.setState({curDate : today.toLocaleString("en-us", optionsDate)}),
    this.setState({curTime : today.toLocaleString("en-us", optionsTime).slice(0, -3)}) //slice removes the AM/PM
    console.log('Hello!')
  },1000)
}

Также вы хотите остановить интервал, когда компонент был размонтирован.Вы могли бы сделать это так 

componentDidMount() {
  ...
  this.intervalId = setInterval(...)
}

componentWillUnmount() {
  clearInterval(this.intervalId)
}
...