Question

我有React个功能组件Input，它是一个简单的input字段，只需要一个名为prop的{{1}}，其值epoch以毫秒为单位。在组件内部，我使用epoch js将此时间格式化为moment（hour：min）格式，同时我也在HH:mm组件内部使用useState进行设置在用户更新需要使用复杂算法检查的输入并需要在数字后加上+/-时，Input的值。

input

Input.jsx

如您所见，我正在使用Internal状态来更新输入的值，而是直接使用prop，因为我需要在用户键入时将一些字符串连接到该值。

我将从父组件发送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值作为paren组件中的propaslo，我有一个按钮来将epoch的值更新为每次点击+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不会触发。

Working demo

已更新

我无法在Input函数中使用useState，因为我使用useEffect，所以它会触发多次重渲染。

Answer 1

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

translateValueToString仅使用一次以初始化状态。道具更改不会更新value，epoch不会在渲染中使用，也不会更新视图。

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

反应功能组件未使用新道具更新

1 个答案: