反应函数组件没有使用新的道具更新

Question

我有React函数组件Input这是一个简单的input字段，它只需要一个名为epoch的prop，以毫秒为单位的epoch值。 在组件内部，我使用momentjs 将这次格式化为HH:mm(小时：分钟(格式，我还在Input组件中使用useState来设置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 组件中，我有按钮以每次点击 +1 分钟更新epoch值。

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它会触发多次多次重新渲染，因为 im 使用redux-form.

Answer 1

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

translateValueToString只使用一次，用于初始化状态。道具更改不会更新value，epoch不用于渲染，不更新视图。

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