如何强制功能组件在提交时呈现?

Question

我有一个表单输入，用onChange更新他们的表单状态(X)，然后我有一个表单onSubmit提交，必须做两件事:

1. 使用来自state(X)的信息更新一个单独的状态(Y)
2. 运行一个实际的函数，使用state(Y)

const [ethValue, setEthValue] = React.useState({ethValue: 0});
const submit = (e) => {
setEthValue(() => { return { ethValue: formData.value } })
e.preventDefault();
runContractFunction()
};

它正在工作，但是为了让它完成任务，我必须按Submit按钮两次，由于设置功能的异步性质。为了让它完成设置，我决定使用重新渲染，这样它就可以完成设置状态，但我尝试的两种方法都不起作用。

由于我使用功能组件，所以我不能使用forceUpdate()，也不能将useEffect放在submit函数中，因为它会将useEffect钩子放在组件函数体之外。

我想让它变成这样你必须按Submit一次,不是两次工作。如何解决这个问题?

提前感谢您的时间!

Answer 1

将该'Y'值作为参数传递给函数，该函数使用该值作为状态。

const submit = (e) => {
setEthValue(() => { return { ethValue: formData.value } })
e.preventDefault();
runContractFunction({
ethValue: formData.value
})
};