useState为何不重新渲染日期更改?

huangapple go评论63阅读模式
英文:

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 &lt;input&gt;.

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) =&gt; {
    if (field == &#39;enddate&#39;) {
      setForm((prev) =&gt; {
        return {
          ...prev,
          startdate: new Date().toISOString()
        }
      }
      )
    }
  }

In my opinion updating state like that doesn't trigger re-render.

     setForm((prev) =&gt; {
       prev.startdate = new Date().toISOString() // using internal day calculator
       return {...prev}
     }

Do you want update this directly? Use immer!

huangapple
  • 本文由 发表于 2023年4月20日 00:16:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76056753.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定