英文:
Why is useState not re-rendering the changes for dates?
问题
I have a react form where I have to put in a logic if startdate > endate, it should revert the startdate to current date. I am adding the form values in an useState array object.
Initial array object looks like this -
num:"12345"
startdate: "06/14/2023"
enddate: "06/01/2023"
I have put in a validation check and once it finds that startdate > endate, it should change the value of startdate to the current date.
const [form, setForm] = useState({})
const revertStartDate = (field) => {
if (field == 'enddate') {
setForm((prev) => {
prev.startdate = new Date().toISOString() // using internal day calculator
return {...prev}
}
)
}
}
The above code changes the form to below :
num:"12345"
startdate: "04/19/2023"
enddate: "06/01/2023"
But it doesn't reflect the same on the UI. The UI still shows 06/14/2023 for the startdate. I have read other answers that it's not changing the state even though the values are getting changed.
Any suggestion on how to re-render the form for the startdate?
英文:
I have a react form where I have to put in a logic if startdate > endate, it should revert the startdate to current date. I am adding the form values in an useState array object.
Initial array object looks like this -
num:"12345"
startdate: "06/14/2023"
enddate: "06/01/2023"
I have put in a validation check and once it finds that startdate > enddate, it should change the value of startdate to current date.
const [form, setForm] = useState({})
const revertStartDate = (field) => {
if (field == 'enddate') {
setForm((prev) => {
prev.startdate = new Date().toISOString() // using internal day calculator
return {...prev}
}
)
}
}
The above code changes the form to below :
num:"12345"
startdate: "04/19/2023"
enddate: "06/01/2023"
But it doesn't reflect the same on the UI. The UI still shows 06/14/2023 for the startdate. I have read other answers that it's not changing the state even though the values are getting changed.
Any suggestion on how to re-render the form for the startdate?
答案1
得分: 2
I can't comment due to low contribution but it would be helpful if you also provide code snippet to your <input>
.
You might want to consider reading the docs:
Controlling an input with a state variable
A controlled input makes sense if you needed state anyway—for example,
to re-render your UI on every edit.
英文:
I can't comment due to low contribution but it would be helpful if you also provide code snippet to your <input>
.
You might want to consider reading the docs:
Controlling an input with a state variable
> A controlled input makes sense if you needed state anyway—for example,
> to re-render your UI on every edit.
答案2
得分: 1
我认为你不能直接改变状态。如果你想确保这一点,请阅读此文档。
const [form, setForm] = useState({})
const revertStartDate = (field) => {
if (field === 'enddate') {
setForm((prev) => {
return {
...prev,
startdate: new Date().toISOString()
}
})
}
}
在我看来,像这样更新状态不会触发重新渲染。
setForm((prev) => {
prev.startdate = new Date().toISOString() // 使用内部日期计算器
return { ...prev }
})
你想要直接更新这个吗?使用immer吧!
英文:
I think you can't mutate state directly. If you want to make sure read this doc.
const [form, setForm] = useState({})
const revertStartDate = (field) => {
if (field == 'enddate') {
setForm((prev) => {
return {
...prev,
startdate: new Date().toISOString()
}
}
)
}
}
In my opinion updating state like that doesn't trigger re-render.
setForm((prev) => {
prev.startdate = new Date().toISOString() // using internal day calculator
return {...prev}
}
Do you want update this directly? Use immer!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论