React: Обновление компонента

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

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

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

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.info('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;

reactjs setinterval

23.05.2018 19:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

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.info('Hello!')
  },1000)
}

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

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

componentWillUnmount() {
  clearInterval(this.intervalId)
}

23.05.2018 19:41

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

constructor() {
  super();
  this.state = {
    curDate: '',
    curTime: '',
  }
}

Не с инициализаторами свойств.

— 23.05.2018 19:45

23.05.2018 19:44

Вы не отображаете поле секунд, поэтому каждую секунду данные не будут обновляться, также вам нужно вычислить дату внутри 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.info("Hello!");
        }, 1000);
      }

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

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

Рабочий ДЕМО

23.05.2018 19:46