Реактивный компонент функции не обновляется новыми реквизитами

Question

У меня есть React компонент функции Input Это простое поле input, оно занимает только одно prop с именем epoch, значение epoch в миллисекундах. внутри компонента я использую moment js для форматирования этого времени в формате HH:mm (час: мин), также я использую useState внутри компонента Input, чтобы установить значение input, пока пользователь обновляет ввод, который мне нужен для проверки со сложными алгоритмами, и нужно добавить +/- с номером.

Input.jsx

import React, {useState, } from 'react'
import moment from 'moment'

function Input({epoch}){
  console.log(epoch)
  const translateValueToString = epochValue => {
    return moment(epochValue).format('HH:mm')
  }
  const [value, updateValue] = useState(translateValueToString(epoch))
  return <input value={value} onChange={(e) => {
    // i need to update the value with some complex calculation and update it
    updateValue(`${e.target.value}+2`)
  }}/>
}

export default Input

Как видите, я использую внутреннее состояние чтобы обновить значение ввода, вместо этого используйте напрямую использовать prop, потому что мне нужно было присоединить некоторую строку к значению при вводе пользователем.

Из родительского компонента, я отправляю значение epoch как prop aslo в компоненте paren у меня есть кнопка для обновления epoch значения с +1 минутой для каждого клика.

App.jsx

import React, {useState} from "react";
import "./styles.css";
import Input from './Input'
import moment from 'moment'

export default function App() {
  const [epoch, updateEpoch] = useState(moment().valueOf())
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Input epoch={epoch}/>
      <button onClick={() => {
        updateEpoch(epoch+60000)
      }}>ADD 1 min</button>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Я ожидаю, что каждый клик должен обновить входное значение с обновленным epoch значение проп. Но этого не произойдет. useState внутри входа не сработает.

Рабочая демонстрация

Обновлено

Не могу использовать useEffect внутри функции ввода она запускает многократное, многократное повторное рендеринг, потому что я использую redux-form.

Answer 1

const [value, updateValue] = useState(translateValueToString(epoch))

translateValueToString используется только один раз, чтобы инициализировать состояние. Изменение реквизита не обновляет value, epoch не используется при рендеринге, обновление представления не выполняется.

useEffect(() => {
  updateValue( translateValueToString(epoch) )
}, [epoch])